@lobehub/chat 1.83.8 → 1.84.0

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

@@ -1,27 +1,8 @@
-import { Icon } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { Block, Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import { LucideIcon } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  card: css`
-    cursor: pointer;
-
-    padding-block: 12px;
-    padding-inline: 16px;
-    border: 1px solid ${token.colorFillSecondary};
-    border-radius: ${token.borderRadiusLG}px;
-
-    background: ${isDarkMode ? token.colorFillTertiary : token.colorBgContainer};
-
-    &:hover {
-      border: 1px solid ${token.colorFill};
-      background: ${isDarkMode ? token.colorFillSecondary : token.colorBgContainer};
-    }
-  `,
-}));
 
 export interface ItemCardProps {
   href: string;
@@ -31,14 +12,13 @@ export interface ItemCardProps {
 }
 
 const ItemCard = memo<ItemCardProps>(({ label, icon, href }) => {
-  const { styles, theme } = useStyles();
-
+  const theme = useTheme();
   return (
     <Link href={href} style={{ color: 'inherit' }} target={'_blank'}>
-      <Flexbox className={styles.card} gap={12} horizontal>
-        {icon && <Icon fill={theme.colorText} icon={icon} size={{ fontSize: 18 }} />}
+      <Block clickable gap={12} horizontal paddingBlock={12} paddingInline={18}>
+        {icon && <Icon fill={theme.colorText} icon={icon} size={18} />}
         {label}
-      </Flexbox>
+      </Block>
     </Link>
   );
 });

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

@@ -19,11 +19,7 @@ const ItemLink = memo<ItemLinkProps>(({ label, href }) => {
     <Link href={href} style={{ color: 'inherit' }} target={'_blank'}>
       <Flexbox align={'center'} gap={8} horizontal>
         {label}
-        <Icon
-          color={theme.colorTextDescription}
-          icon={SquareArrowOutUpRight}
-          size={{ fontSize: 14 }}
-        />
+        <Icon color={theme.colorTextDescription} icon={SquareArrowOutUpRight} size={14} />
       </Flexbox>
     </Link>
   );

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

@@ -1,9 +1,9 @@
-import { Button, Tag } from 'antd';
+import { Block, Button, Tag } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
 import { ProductLogo } from '@/components/Branding';
 import { BRANDING_NAME } from '@/const/branding';
@@ -14,10 +14,7 @@ import { useGlobalStore } from '@/store/global';
 
 const useStyles = createStyles(({ css, token }) => ({
   logo: css`
-    overflow: hidden;
     border-radius: ${token.borderRadiusLG * 2}px;
-    background: ${token.colorBgContainer};
-    box-shadow: 0 0 0 1px ${token.colorFillSecondary} inset;
   `,
 }));
 
@@ -25,7 +22,7 @@ const Version = memo<{ mobile?: boolean }>(({ mobile }) => {
   const hasNewVersion = useNewVersion();
   const [latestVersion] = useGlobalStore((s) => [s.latestVersion]);
   const { t } = useTranslation('common');
-  const { styles, theme } = useStyles();
+  const { styles } = useStyles();
 
   return (
     <Flexbox
@@ -37,24 +34,23 @@ const Version = memo<{ mobile?: boolean }>(({ mobile }) => {
     >
       <Flexbox align={'center'} flex={'none'} gap={16} horizontal>
         <Link href={OFFICIAL_SITE} target={'_blank'}>
-          <Center className={styles.logo} height={64} width={64}>
+          <Block
+            align={'center'}
+            className={styles.logo}
+            clickable
+            height={64}
+            justify={'center'}
+            width={64}
+          >
             <ProductLogo size={52} />
-          </Center>
+          </Block>
         </Link>
-        <Flexbox>
+        <Flexbox align={'flex-start'} gap={6}>
           <div style={{ fontSize: 18, fontWeight: 'bolder' }}>{BRANDING_NAME}</div>
           <div>
-            <Tag color={theme.colorFillSecondary} style={{ color: theme.colorTextSecondary }}>
-              v{CURRENT_VERSION}
-            </Tag>
+            <Tag>v{CURRENT_VERSION}</Tag>
             {hasNewVersion && (
-              <Tag
-                bordered={false}
-                style={{
-                  background: theme.colorInfoBgHover,
-                  color: theme.colorInfo,
-                }}
-              >
+              <Tag color={'info'}>
                 {t('upgradeVersion.newVersion', { version: `v${latestVersion}` })}
               </Tag>
             )}

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

@@ -49,7 +49,7 @@ const Page = memo<{ mobile?: boolean }>(({ mobile }) => {
       <Form.Group
         style={{ width: '100%' }}
         title={`${t('about')} ${BRANDING_NAME}`}
-        variant={'pure'}
+        variant={'borderless'}
       >
         <Flexbox gap={20} paddingBlock={20} width={'100%'}>
           <div className={styles.title}>{t('version')}</div>

package/src/app/[variants]/(main)/settings/agent/AgentMenu/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Alert } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { useQueryState } from 'nuqs';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { AgentCategory } from '@/features/AgentSetting';
+import { ChatSettingsTabs } from '@/store/global/initialState';
+
+interface ProviderMenuProps {
+  mobile?: boolean;
+}
+const ProviderMenu = memo(({ mobile }: ProviderMenuProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation('setting');
+  const [tab, setTab] = useQueryState('tab', {
+    defaultValue: ChatSettingsTabs.Prompt,
+  });
+
+  const width = mobile ? undefined : 260;
+  return (
+    <Flexbox
+      gap={24}
+      paddingBlock={28}
+      paddingInline={12}
+      style={{
+        background: theme.colorBgLayout,
+        borderRight: `1px solid ${theme.colorBorderSecondary}`,
+        minWidth: width,
+        overflow: mobile ? undefined : 'scroll',
+      }}
+      width={width}
+    >
+      <Alert
+        message={t('systemAgent.helpInfo')}
+        style={{
+          borderRadius: theme.borderRadius,
+        }}
+        variant={'filled'}
+      />
+      <AgentCategory setTab={setTab} tab={tab} />
+    </Flexbox>
+  );
+});
+
+export default ProviderMenu;

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

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

package/src/app/[variants]/(main)/settings/agent/_layout/Mobile.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { PropsWithChildren } from 'react';
+
+import ProviderMenu from '../AgentMenu';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  const pathname = usePathname();
+
+  return pathname === '/settings/agent' ? <ProviderMenu mobile /> : children;
+};
+
+export default Layout;

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

@@ -1,18 +1,24 @@
 'use client';
 
 import isEqual from 'fast-deep-equal';
+import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { AgentSettings } from '@/features/AgentSetting';
+import { ChatSettingsTabs } from '@/store/global/initialState';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
 const Page = memo(() => {
+  const [tab] = useQueryState('tab', {
+    defaultValue: ChatSettingsTabs.Prompt,
+  });
   const config = useUserStore(settingsSelectors.defaultAgentConfig, isEqual);
   const meta = useUserStore(settingsSelectors.defaultAgentMeta, isEqual);
   const [updateAgent] = useUserStore((s) => [s.updateDefaultAgent]);
   const isUserStateInit = useUserStore((s) => s.isUserStateInit);
+
   return (
     <AgentSettings
       config={config}
@@ -25,6 +31,7 @@ const Page = memo(() => {
       onMetaChange={(meta) => {
         updateAgent({ meta });
       }}
+      tab={tab as ChatSettingsTabs}
     />
   );
 });

package/src/app/[variants]/(main)/settings/agent/layout.tsx

@@ -0,0 +1,23 @@
+import { notFound } from 'next/navigation';
+import { PropsWithChildren } from 'react';
+
+import ServerLayout from '@/components/server/ServerLayout';
+import { serverFeatureFlags } from '@/config/featureFlags';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const Layout = ServerLayout({ Desktop, Mobile });
+
+const ProviderSettingsLayout = ({ children, ...res }: PropsWithChildren) => {
+  const showLLM = serverFeatureFlags().showProvider;
+  if (!showLLM) return notFound();
+
+  return <Layout {...res}>{children}</Layout>;
+};
+
+ProviderSettingsLayout.displayName = 'ProviderSettingsLayout';
+
+export default ProviderSettingsLayout;
+
+export const dynamic = 'auto';

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { Form, type ItemGroup } from '@lobehub/ui';
-import { App, Button, Input } from 'antd';
+import { Button, Form, type FormGroupItemType, InputPassword } from '@lobehub/ui';
+import { App } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,8 +14,6 @@ import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
-type SettingItemGroup = ItemGroup;
-
 const Common = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
@@ -40,11 +38,11 @@ const Common = memo(() => {
     });
   }, []);
 
-  const system: SettingItemGroup = {
+  const system: FormGroupItemType = {
     children: [
       {
         children: (
-          <Input.Password
+          <InputPassword
             autoComplete={'new-password'}
             placeholder={t('settingSystem.accessCode.placeholder')}
           />
@@ -56,7 +54,7 @@ const Common = memo(() => {
       },
       {
         children: (
-          <Button danger onClick={handleReset} type="primary">
+          <Button danger onClick={handleReset} type={'primary'}>
             {t('danger.reset.action')}
           </Button>
         ),
@@ -77,7 +75,7 @@ const Common = memo(() => {
       items={[system]}
       itemsType={'group'}
       onValuesChange={setSettings}
-      variant={'pure'}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

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`)}
           />