@lobehub/chat 1.83.8 → 1.84.0

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>
+    </>
   );
 });
 

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/AddNew.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Icon, Tooltip } from '@lobehub/ui';
-import { Button } from 'antd';
+import { ActionIcon } from '@lobehub/ui';
 import { PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -13,15 +12,19 @@ const AddNewProvider = () => {
   const [open, setOpen] = useState(false);
 
   return (
-    <Tooltip title={t('menu.addCustomProvider')}>
-      <Button
-        color={'default'}
-        icon={<Icon icon={PlusIcon} />}
+    <>
+      <ActionIcon
+        icon={PlusIcon}
         onClick={() => setOpen(true)}
+        size={{
+          blockSize: 34,
+          size: 18,
+        }}
+        title={t('menu.addCustomProvider')}
         variant={'filled'}
       />
       <CreateNewProvider onClose={() => setOpen(false)} open={open} />
-    </Tooltip>
+    </>
   );
 };
 

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/All.tsx

@@ -19,7 +19,7 @@ const All = memo(() => {
     <Link className={cx(styles.container, pathname === ALL_PATH && styles.active)} href={ALL_PATH}>
       <Flexbox gap={8} horizontal>
         <Center width={24}>
-          <Icon icon={WalletCards} size={{ fontSize: 18 }} />
+          <Icon icon={WalletCards} size={18} />
         </Center>
         {t('menu.all')}
       </Flexbox>

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/List.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, ScrollShadow } from '@lobehub/ui';
 import { Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { ArrowDownUpIcon } from 'lucide-react';
@@ -31,7 +31,7 @@ const ProviderList = () => {
 
   const isMobile = useIsMobile();
   return (
-    <Flexbox gap={4} padding={'0 12px'} style={{ marginBottom: 12 }}>
+    <ScrollShadow gap={4} height={'100%'} paddingInline={12} size={4} style={{ paddingBottom: 32 }}>
       {!isMobile && <All />}
       <Flexbox
         align={'center'}
@@ -69,7 +69,7 @@ const ProviderList = () => {
       {disabledModelProviderList.map((item) => (
         <ProviderItem {...item} key={item.id} />
       ))}
-    </Flexbox>
+    </ScrollShadow>
   );
 };
 

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/SortProviderModal/index.tsx

@@ -1,5 +1,5 @@
-import { Modal, SortableList } from '@lobehub/ui';
-import { App, Button } from 'antd';
+import { Button, Modal, SortableList } from '@lobehub/ui';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

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

@@ -29,15 +29,27 @@ const Layout = memo(({ children, mobile }: ProviderMenuProps) => {
 
   useFetchAiProviderList();
 
-  const width = mobile ? undefined : 260;
+  const width = mobile ? undefined : 280;
   return (
-    <Flexbox style={{ minWidth: width, overflow: mobile ? undefined : 'scroll' }} width={width}>
+    <Flexbox
+      style={{
+        background: theme.colorBgLayout,
+        borderRight: `1px solid ${theme.colorBorderSecondary}`,
+        minWidth: width,
+        overflow: mobile ? undefined : 'scroll',
+      }}
+      width={width}
+    >
       <Flexbox
         gap={8}
         horizontal
         justify={'space-between'}
         padding={'16px 12px 12px'}
-        style={{ background: theme.colorBgLayout, position: 'sticky', top: 0, zIndex: 50 }}
+        style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 50,
+        }}
         width={'100%'}
       >
         <SearchBar
@@ -45,8 +57,8 @@ const Layout = memo(({ children, mobile }: ProviderMenuProps) => {
           onChange={(e) => useAiInfraStore.setState({ providerSearchKeyword: e.target.value })}
           placeholder={t('menu.searchProviders')}
           style={{ width: '100%' }}
-          type={'block'}
           value={providerSearchKeyword}
+          variant={'filled'}
         />
         <AddNew />
       </Flexbox>

package/src/app/[variants]/(main)/settings/provider/_layout/Desktop/Container.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { PropsWithChildren, memo } from 'react';
+
+import SettingContainer from '@/features/Setting/SettingContainer';
+
+const Container = memo<PropsWithChildren>(({ children }) => {
+  const path = usePathname();
+  const isRoot = path === '/settings/provider';
+  return <SettingContainer variant={isRoot ? 'secondary' : undefined}>{children}</SettingContainer>;
+});
+export default Container;

package/src/app/[variants]/(main)/settings/provider/_layout/Desktop/index.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import NProgress from '@/components/NProgress';
+
+import ProviderMenu from '../../ProviderMenu';
+import Container from './Container';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <>
+      <NProgress />
+      <Flexbox horizontal width={'100%'}>
+        <ProviderMenu />
+        <Container>{children}</Container>
+      </Flexbox>
+    </>
+  );
+};
+export default Layout;

package/src/app/[variants]/(main)/settings/provider/features/CreateNewProvider/index.tsx

@@ -1,7 +1,14 @@
 import { ProviderIcon } from '@lobehub/icons';
-import { FormModal, Icon } from '@lobehub/ui';
-import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
-import { App, Input, Select } from 'antd';
+import {
+  type FormItemProps,
+  FormModal,
+  Icon,
+  Input,
+  InputPassword,
+  Select,
+  TextArea,
+} from '@lobehub/ui';
+import { App } from 'antd';
 import { BrainIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
@@ -67,7 +74,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
     },
     {
       children: (
-        <Input.TextArea
+        <TextArea
           placeholder={t('createNewAiProvider.description.placeholder')}
           style={{ minHeight: 80 }}
           variant={'filled'}
@@ -111,7 +118,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
       rules: [{ message: t('createNewAiProvider.sdkType.required'), required: true }],
     },
     {
-      children: <Input allowClear placeholder={'https://xxxx-proxy.com/v1'} variant={'filled'} />,
+      children: <Input allowClear placeholder={'https://xxxx-proxy.com/v1'} />,
       label: t('createNewAiProvider.proxyUrl.title'),
       minWidth: 400,
       name: [KeyVaultsConfigKey, LLMProviderBaseUrlKey],
@@ -119,7 +126,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
     },
     {
       children: (
-        <Input.Password
+        <InputPassword
           autoComplete={'new-password'}
           placeholder={t('createNewAiProvider.apiKey.placeholder')}
           variant={'filled'}
@@ -134,6 +141,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
   return (
     <FormModal
       destroyOnClose
+      height={'90%'}
       items={[
         {
           children: basicItems,
@@ -144,7 +152,6 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
           title: t('createNewAiProvider.configTitle'),
         },
       ]}
-      maxHeight={'90%'}
       onCancel={onClose}
       onFinish={onFinish}
       open={open}

package/src/app/[variants]/(main)/settings/provider/features/ModelList/CreateNewModelModal/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/provider/features/ModelList/CreateNewModelModal/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 { memo, use, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/settings/provider/features/ModelList/DisabledModels.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@lobehub/ui';
-import { Button, Typography } from 'antd';
+import { Button } from '@lobehub/ui';
+import { Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { ChevronDown } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -31,13 +31,11 @@ const DisabledModels = memo(() => {
         {!showMore && disabledModels.length > 10 && (
           <Button
             block
-            color={'default'}
-            icon={<Icon icon={ChevronDown} />}
+            icon={ChevronDown}
             onClick={() => {
               setShowMore(true);
             }}
             size={'small'}
-            variant={'filled'}
           >
             {t('providerModels.list.disabledActions.showMore')}
           </Button>

package/src/app/[variants]/(main)/settings/provider/features/ModelList/EmptyModels.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 { BrainIcon, LucideRefreshCcwDot, PlusIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -67,7 +66,7 @@ const EmptyState = memo<{ provider: string }>(({ provider }) => {
 
       <Flexbox gap={8} horizontal>
         <Button
-          icon={<Icon icon={PlusIcon} />}
+          icon={PlusIcon}
           onClick={() => {
             setShowModal(true);
           }}

package/src/app/[variants]/(main)/settings/provider/features/ModelList/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, use, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,7 +37,6 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ id, open, setOpen }) =>
         <Button key="cancel" onClick={closeModal}>
           {t('cancel')}
         </Button>,
-
         <Button
           key="ok"
           loading={loading}

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

@@ -26,7 +26,7 @@ export const useStyles = createStyles(({ css, token, cx }) => {
     config,
     container: css`
       position: relative;
-      border-radius: 12px;
+      border-radius: ${token.borderRadiusLG}px;
       transition: all 200ms ease-in-out;
 
       &:hover {