@lobehub/chat 1.83.7 → 1.84.0

package/src/app/[variants]/(main)/settings/common/features/Theme/ThemeSwatches/ThemeSwatchesNeutral.tsx

@@ -1,16 +1,13 @@
-import {
-  NeutralColors,
-  Swatches,
-  findCustomThemeName,
-  neutralColors,
-  neutralColorsSwatches,
-} from '@lobehub/ui';
+import { ColorSwatches, NeutralColors, findCustomThemeName, neutralColors } from '@lobehub/ui';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useUserStore } from '@/store/user';
 import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 
 const ThemeSwatchesNeutral = memo(() => {
+  const { t } = useTranslation('color');
+
   const [neutralColor, updateGeneralConfig] = useUserStore((s) => [
     userGeneralSettingsSelectors.neutralColor(s),
     s.updateGeneralConfig,
@@ -22,10 +19,35 @@ const ThemeSwatchesNeutral = memo(() => {
   };
 
   return (
-    <Swatches
-      activeColor={neutralColor ? neutralColors[neutralColor] : undefined}
-      colors={neutralColorsSwatches}
-      onSelect={handleSelect}
+    <ColorSwatches
+      colors={[
+        {
+          color: 'rgba(0, 0, 0, 0)',
+          title: t('default'),
+        },
+        {
+          color: neutralColors.mauve,
+          title: t('mauve'),
+        },
+        {
+          color: neutralColors.olive,
+          title: t('olive'),
+        },
+        {
+          color: neutralColors.sage,
+          title: t('sage'),
+        },
+        {
+          color: neutralColors.sand,
+          title: t('sand'),
+        },
+        {
+          color: neutralColors.slate,
+          title: t('slate'),
+        },
+      ]}
+      onChange={handleSelect}
+      value={neutralColor ? neutralColors[neutralColor] : undefined}
     />
   );
 });

package/src/app/[variants]/(main)/settings/common/features/Theme/ThemeSwatches/ThemeSwatchesPrimary.tsx

@@ -1,16 +1,12 @@
-import {
-  PrimaryColors,
-  Swatches,
-  findCustomThemeName,
-  primaryColors,
-  primaryColorsSwatches,
-} from '@lobehub/ui';
+import { ColorSwatches, PrimaryColors, findCustomThemeName, primaryColors } from '@lobehub/ui';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useUserStore } from '@/store/user';
 import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 
 const ThemeSwatchesPrimary = memo(() => {
+  const { t } = useTranslation('color');
   const [primaryColor, updateGeneralConfig] = useUserStore((s) => [
     userGeneralSettingsSelectors.primaryColor(s),
     s.updateGeneralConfig,
@@ -22,10 +18,63 @@ const ThemeSwatchesPrimary = memo(() => {
   };
 
   return (
-    <Swatches
-      activeColor={primaryColor ? primaryColors[primaryColor] : undefined}
-      colors={primaryColorsSwatches}
-      onSelect={handleSelect}
+    <ColorSwatches
+      colors={[
+        {
+          color: 'rgba(0, 0, 0, 0)',
+          title: t('default'),
+        },
+        {
+          color: primaryColors.red,
+          title: t('red'),
+        },
+        {
+          color: primaryColors.orange,
+          title: t('orange'),
+        },
+        {
+          color: primaryColors.gold,
+          title: t('gold'),
+        },
+        {
+          color: primaryColors.yellow,
+          title: t('yellow'),
+        },
+        {
+          color: primaryColors.lime,
+          title: t('lime'),
+        },
+        {
+          color: primaryColors.green,
+          title: t('green'),
+        },
+        {
+          color: primaryColors.cyan,
+          title: t('cyan'),
+        },
+        {
+          color: primaryColors.blue,
+          title: t('blue'),
+        },
+        {
+          color: primaryColors.geekblue,
+          title: t('geekblue'),
+        },
+        {
+          color: primaryColors.purple,
+          title: t('purple'),
+        },
+        {
+          color: primaryColors.magenta,
+          title: t('magenta'),
+        },
+        {
+          color: primaryColors.volcano,
+          title: t('volcano'),
+        },
+      ]}
+      onChange={handleSelect}
+      value={primaryColor ? primaryColors[primaryColor] : undefined}
     />
   );
 });

package/src/app/[variants]/(main)/settings/common/features/Theme/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Form, type ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
-import { Select } from 'antd';
+import { Form, type FormGroupItemType, ImageSelect, SliderWithInput } from '@lobehub/ui';
+import { Select } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { Monitor, Moon, Sun } from 'lucide-react';
 import { memo } from 'react';
@@ -18,8 +18,6 @@ import { settingsSelectors } from '@/store/user/selectors';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
 
-type SettingItemGroup = ItemGroup;
-
 const Theme = memo(() => {
   const { t } = useTranslation('setting');
 
@@ -36,11 +34,11 @@ const Theme = memo(() => {
     switchLocale(value);
   };
 
-  const theme: SettingItemGroup = {
+  const theme: FormGroupItemType = {
     children: [
       {
         children: (
-          <SelectWithImg
+          <ImageSelect
             height={60}
             onChange={setThemeMode}
             options={[
@@ -139,7 +137,7 @@ const Theme = memo(() => {
       items={[theme]}
       itemsType={'group'}
       onValuesChange={setSettings}
-      variant={'pure'}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

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

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

package/src/app/[variants]/(main)/settings/hooks/useCategory.tsx

@@ -1,5 +1,4 @@
-import { Icon } from '@lobehub/ui';
-import { Tag } from 'antd';
+import { Icon, Tag } from '@lobehub/ui';
 import {
   Bot,
   Brain,

package/src/app/[variants]/(main)/settings/hotkey/features/HotkeySetting.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Form, HotkeyInput, type ItemGroup } from '@lobehub/ui';
+import { Form, type FormGroupItemType, HotkeyInput } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -20,8 +20,6 @@ const filterByDesktop = (item: HotkeyItem) => {
   if (!isDesktop) return !item.isDesktop;
 };
 
-type SettingItemGroup = ItemGroup;
-
 const HOTKEY_SETTING_KEY = 'hotkey';
 
 const HotkeySetting = memo(() => {
@@ -59,14 +57,14 @@ const HotkeySetting = memo(() => {
     };
   };
 
-  const essential: SettingItemGroup = {
+  const essential: FormGroupItemType = {
     children: HOTKEYS_REGISTRATION.filter((item) => item.group === HotkeyGroupEnum.Essential)
       .filter((item) => filterByDesktop(item))
       .map((item) => mapHotkeyItem(item)),
     title: t('hotkey.group.essential'),
   };
 
-  const conversation: SettingItemGroup = {
+  const conversation: FormGroupItemType = {
     children: HOTKEYS_REGISTRATION.filter((item) => item.group === HotkeyGroupEnum.Conversation)
       .filter((item) => filterByDesktop(item))
       .map((item) => mapHotkeyItem(item)),
@@ -80,7 +78,7 @@ const HotkeySetting = memo(() => {
       items={[essential, conversation]}
       itemsType={'group'}
       onValuesChange={setSettings}
-      variant={'pure'}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

package/src/app/[variants]/(main)/settings/llm/ProviderList/Azure/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Markdown } from '@lobehub/ui';
-import { AutoComplete, Input } from 'antd';
+import { AutoComplete, Input, InputPassword, Markdown } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
 
@@ -46,10 +45,7 @@ export const useAzureProvider = (): ProviderItem => {
     apiKeyItems: [
       {
         children: (
-          <Input.Password
-            autoComplete={'new-password'}
-            placeholder={t('azure.token.placeholder')}
-          />
+          <InputPassword autoComplete={'new-password'} placeholder={t('azure.token.placeholder')} />
         ),
         desc: t('azure.token.desc'),
         label: t('azure.token.title'),

package/src/app/[variants]/(main)/settings/llm/ProviderList/Bedrock/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Input, Select } from 'antd';
+import { InputPassword, Select } from '@lobehub/ui';
 import { useTranslation } from 'react-i18next';
 
 import { BedrockProviderCard } from '@/config/modelProviders';
@@ -19,7 +19,7 @@ export const useBedrockProvider = (): ProviderItem => {
     apiKeyItems: [
       {
         children: (
-          <Input.Password
+          <InputPassword
             autoComplete={'new-password'}
             placeholder={t(`${providerKey}.accessKeyId.placeholder`)}
           />
@@ -30,7 +30,7 @@ export const useBedrockProvider = (): ProviderItem => {
       },
       {
         children: (
-          <Input.Password
+          <InputPassword
             autoComplete={'new-password'}
             placeholder={t(`${providerKey}.secretAccessKey.placeholder`)}
           />
@@ -41,7 +41,7 @@ export const useBedrockProvider = (): ProviderItem => {
       },
       {
         children: (
-          <Input.Password
+          <InputPassword
             autoComplete={'new-password'}
             placeholder={t(`${providerKey}.sessionToken.placeholder`)}
           />

package/src/app/[variants]/(main)/settings/llm/ProviderList/Cloudflare/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Input } from 'antd';
+import { Input, InputPassword } from '@lobehub/ui';
 import { useTranslation } from 'react-i18next';
 
 import { CloudflareProviderCard } from '@/config/modelProviders';
@@ -19,7 +19,7 @@ export const useCloudflareProvider = (): ProviderItem => {
     apiKeyItems: [
       {
         children: (
-          <Input.Password
+          <InputPassword
             autoComplete={'new-password'}
             placeholder={t(`${providerKey}.apiKey.placeholder`)}
           />

package/src/app/[variants]/(main)/settings/llm/ProviderList/Github/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Markdown } from '@lobehub/ui';
-import { Input } from 'antd';
+import { InputPassword, Markdown } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
 
@@ -35,7 +34,7 @@ export const useGithubProvider = (): ProviderItem => {
     apiKeyItems: [
       {
         children: (
-          <Input.Password
+          <InputPassword
             autoComplete={'new-password'}
             placeholder={t(`${providerKey}.personalAccessToken.placeholder`)}
           />

package/src/app/[variants]/(main)/settings/llm/ProviderList/HuggingFace/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Markdown } from '@lobehub/ui';
-import { Input } from 'antd';
+import { InputPassword, Markdown } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
 
@@ -35,7 +34,7 @@ export const useHuggingFaceProvider = (): ProviderItem => {
     apiKeyItems: [
       {
         children: (
-          <Input.Password
+          <InputPassword
             autoComplete={'new-password'}
             placeholder={t(`${providerKey}.accessToken.placeholder`)}
           />

package/src/app/[variants]/(main)/settings/llm/components/Checker.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { CheckCircleFilled } from '@ant-design/icons';
-import { Alert, Highlighter } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Alert, Button, Highlighter } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -29,7 +28,7 @@ const Error = memo<{ error: ChatMessageError }>(({ error }) => {
         banner
         extra={
           <Flexbox>
-            <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+            <Highlighter actionIconSize={'small'} language={'json'} variant={'borderless'}>
               {JSON.stringify(error.body || error, null, 2)}
             </Highlighter>
           </Flexbox>

package/src/app/[variants]/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -1,8 +1,16 @@
 'use client';
 
 import { ProviderCombine } from '@lobehub/icons';
-import { Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
-import { Input, Switch } from 'antd';
+import {
+  Form,
+  type FormGroupItemType,
+  type FormItemProps,
+  Icon,
+  Input,
+  InputPassword,
+  Tooltip,
+} from '@lobehub/ui';
+import { Switch } from 'antd';
 import { createStyles } from 'antd-style';
 import { debounce } from 'lodash-es';
 import { LockIcon } from 'lucide-react';
@@ -146,7 +154,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
       : (apiKeyItems ?? [
           {
             children: (
-              <Input.Password
+              <InputPassword
                 autoComplete={'new-password'}
                 placeholder={t(`llm.apiKey.placeholder`, { name })}
               />
@@ -236,7 +244,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
 
     /* ↑ cloud slot ↑ */
 
-    const model: ItemGroup = {
+    const model: FormGroupItemType = {
       children: formItems,
 
       defaultActive: canDeactivate ? enabled : undefined,

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/ModelConfigModal/Form.tsx

@@ -1,4 +1,5 @@
-import { Checkbox, Form, FormInstance, Input } from 'antd';
+import { Input } from '@lobehub/ui';
+import { Checkbox, Form, FormInstance } from 'antd';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/ModelConfigModal/index.tsx

@@ -1,5 +1,5 @@
-import { Modal } from '@lobehub/ui';
-import { Button, FormInstance } from 'antd';
+import { Button, Modal } from '@lobehub/ui';
+import { FormInstance } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -44,7 +44,6 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, pro
         <Button key="cancel" onClick={closeModal}>
           {tc('cancel')}
         </Button>,
-
         <Button
           key="ok"
           onClick={() => {

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/index.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Select } from 'antd';
+import { ActionIcon, Select } from '@lobehub/ui';
 import { css, cx } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { RotateCwIcon } from 'lucide-react';
@@ -88,7 +87,7 @@ const ProviderModelListSelect = memo<CustomModelSelectProps>(
                 />
               )}
             </div>
-            <Select<string[]>
+            <Select
               allowClear
               mode="tags"
               notFoundContent={notFoundContent}

package/src/app/[variants]/(main)/settings/provider/(detail)/azure/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Markdown } from '@lobehub/ui';
-import { AutoComplete } from 'antd';
+import { AutoComplete, Markdown } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/settings/provider/(detail)/bedrock/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Select } from 'antd';
+import { Select } from '@lobehub/ui';
 import { useTranslation } from 'react-i18next';
 
 import { FormPassword } from '@/components/FormInput';

package/src/app/[variants]/(main)/settings/provider/(detail)/doubao/page.tsx

@@ -11,7 +11,6 @@ import ProviderDetail from '../[id]';
 const providerKey = ModelProvider.Doubao;
 
 const useProviderCard = (): ProviderItem => {
-
   // Get the first model card's deployment name as the check model
   const checkModel = useUserStore((s) => {
     const chatModelCards = modelProviderSelectors.getModelCardsById(providerKey)(s);
@@ -32,9 +31,9 @@ const useProviderCard = (): ProviderItem => {
 };
 
 const Page = () => {
-    const card = useProviderCard();
-  
-    return <ProviderDetail {...card} />;
-  };
-  
-  export default Page;
+  const card = useProviderCard();
+
+  return <ProviderDetail {...card} />;
+};
+
+export default Page;

package/src/app/[variants]/(main)/settings/provider/(list)/ProviderGrid/Card.tsx

@@ -63,13 +63,21 @@ const ProviderCard = memo<ProviderCardProps>(
                   </Flexbox>
                 )}
               </Flexbox>
-              <Paragraph className={styles.desc} ellipsis={{ rows: 2, tooltip: true }}>
+              <Paragraph
+                className={styles.desc}
+                ellipsis={{
+                  rows: 2,
+                  tooltip: {
+                    arrow: false,
+                  },
+                }}
+              >
                 {source === 'custom' ? description : t(`${id}.description`)}
               </Paragraph>
             </Flexbox>
           </Link>
           <Divider style={{ margin: '4px 0' }} />
-          <Flexbox horizontal justify={'space-between'} paddingBlock={'8px 0'}>
+          <Flexbox horizontal justify={'space-between'}>
             <div />
             <EnableSwitch enabled={enabled} id={id} />
           </Flexbox>

package/src/app/[variants]/(main)/settings/provider/(list)/ProviderGrid/EnableSwitch.tsx

@@ -4,7 +4,7 @@ import InstantSwitch from '@/components/InstantSwitch';
 import { useAiInfraStore } from '@/store/aiInfra';
 
 interface SwitchProps {
-  Component?: FC<{ enabled: boolean, id: string; }>;
+  Component?: FC<{ enabled: boolean; id: string }>;
   enabled: boolean;
   id: string;
 }

package/src/app/[variants]/(main)/settings/provider/(list)/ProviderGrid/index.tsx

@@ -1,61 +1,35 @@
 'use client';
 
-import { Grid } from '@lobehub/ui';
+import { Grid, Tag } from '@lobehub/ui';
 import { Typography } from 'antd';
-import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 
 import Card from './Card';
 
-const useStyles = createStyles(({ css, responsive, token }) => ({
-  count: css`
-    height: 20px;
-    padding-block: 0;
-    padding-inline: 6px;
-    border-radius: 12px;
-
-    color: ${token.colorTextDescription};
-
-    background: ${token.colorFillSecondary};
-  `,
-  grid: css`
-    grid-template-columns: repeat(2, 1fr);
-
-    ${responsive.desktop} {
-      grid-template-columns: repeat(3, 1fr);
-    }
-
-    ${responsive.md} {
-      grid-template-columns: repeat(1, 1fr);
-    }
-  `,
-}));
-
 const loadingArr = Array.from({ length: 12 })
   .fill('-')
   .map((item, index) => `${index}x${item}`);
 
 const List = memo(() => {
   const { t } = useTranslation('modelProvider');
-  const { styles } = useStyles();
   const enabledList = useAiInfraStore(aiProviderSelectors.enabledAiProviderList, isEqual);
   const disabledList = useAiInfraStore(aiProviderSelectors.disabledAiProviderList, isEqual);
   const [initAiProviderList] = useAiInfraStore((s) => [s.initAiProviderList]);
 
   if (!initAiProviderList)
     return (
-      <Flexbox gap={12} paddingBlock={'0 16px'}>
+      <Flexbox gap={24} paddingBlock={'0 16px'}>
         <Flexbox align={'center'} gap={4} horizontal>
           <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
             {t('list.title.enabled')}
           </Typography.Text>
         </Flexbox>
-        <Grid className={styles.grid}>
+        <Grid gap={16} rows={3}>
           {loadingArr.map((item) => (
             <Card enabled={false} id={item} key={item} loading source={'builtin'} />
           ))}
@@ -64,34 +38,34 @@ const List = memo(() => {
     );
 
   return (
-    <Flexbox gap={24} paddingBlock={'0 16px'}>
-      <Flexbox gap={12}>
-        <Flexbox align={'center'} gap={4} horizontal>
-          <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+    <>
+      <Flexbox gap={24}>
+        <Flexbox align={'center'} gap={8} horizontal>
+          <Typography.Text style={{ fontSize: 18, fontWeight: 'bold' }}>
             {t('list.title.enabled')}
           </Typography.Text>
-          <Center className={styles.count}>{enabledList.length}</Center>
+          <Tag>{enabledList.length}</Tag>
         </Flexbox>
-        <Grid className={styles.grid}>
+        <Grid gap={16} rows={3}>
           {enabledList.map((item) => (
             <Card {...item} key={item.id} />
           ))}
         </Grid>
       </Flexbox>
-      <Flexbox gap={12}>
-        <Flexbox align={'center'} gap={4} horizontal>
-          <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+      <Flexbox gap={24}>
+        <Flexbox align={'center'} gap={8} horizontal>
+          <Typography.Text style={{ fontSize: 18, fontWeight: 'bold' }}>
             {t('list.title.disabled')}
           </Typography.Text>
-          <Center className={styles.count}>{disabledList.length}</Center>
+          <Tag>{disabledList.length}</Tag>
         </Flexbox>
-        <Grid className={styles.grid}>
+        <Grid gap={16} rows={3}>
           {disabledList.map((item) => (
             <Card {...item} key={item.id} />
           ))}
         </Grid>
       </Flexbox>
-    </Flexbox>
+    </>
   );
 });