@lobehub/chat 0.152.10 → 0.152.12

package/src/app/(main)/@nav/_layout/Desktop/BottomActions.tsx

@@ -1,123 +1,14 @@
-import { ActionIcon, DiscordIcon, Icon } from '@lobehub/ui';
-import { Badge, ConfigProvider, Dropdown, MenuProps } from 'antd';
-import {
-  Book,
-  Feather,
-  FileClock,
-  Github,
-  HardDriveDownload,
-  HardDriveUpload,
-  Heart,
-  Settings,
-  Settings2,
-} from 'lucide-react';
+import { ActionIcon } from '@lobehub/ui';
+import { Book, Github } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
-import { ABOUT, CHANGELOG, DISCORD, DOCUMENTS, FEEDBACK, GITHUB } from '@/const/url';
-import DataImporter from '@/features/DataImporter';
-import { configService } from '@/services/config';
-import { useGlobalStore } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
+import { DOCUMENTS, GITHUB } from '@/const/url';
 
-export interface BottomActionProps {
-  tab?: SidebarTabKey;
-}
-
-const BottomActions = memo<BottomActionProps>(({ tab }) => {
-  const router = useRouter();
+const BottomActions = memo(() => {
   const { t } = useTranslation('common');
 
-  const [hasNewVersion, useCheckLatestVersion] = useGlobalStore((s) => [
-    s.hasNewVersion,
-    s.useCheckLatestVersion,
-  ]);
-
-  useCheckLatestVersion();
-
-  const items: MenuProps['items'] = [
-    {
-      icon: <Icon icon={HardDriveUpload} />,
-      key: 'import',
-      label: <DataImporter>{t('import')}</DataImporter>,
-    },
-    {
-      children: [
-        {
-          key: 'allAgent',
-          label: <div>{t('exportType.allAgent')}</div>,
-          onClick: configService.exportAgents,
-        },
-        {
-          key: 'allAgentWithMessage',
-          label: <div>{t('exportType.allAgentWithMessage')}</div>,
-          onClick: configService.exportSessions,
-        },
-        {
-          key: 'globalSetting',
-          label: <div>{t('exportType.globalSetting')}</div>,
-          onClick: configService.exportSettings,
-        },
-        {
-          type: 'divider',
-        },
-        {
-          key: 'all',
-          label: <div>{t('exportType.all')}</div>,
-          onClick: configService.exportAll,
-        },
-      ],
-      icon: <Icon icon={HardDriveDownload} />,
-      key: 'export',
-      label: t('export'),
-    },
-    {
-      type: 'divider',
-    },
-    {
-      icon: <Icon icon={Feather} />,
-      key: 'feedback',
-      label: t('feedback'),
-      onClick: () => window.open(FEEDBACK, '__blank'),
-    },
-    {
-      icon: <Icon icon={FileClock} />,
-      key: 'changelog',
-      label: t('changelog'),
-      onClick: () => window.open(CHANGELOG, '__blank'),
-    },
-    {
-      icon: <Icon icon={DiscordIcon} />,
-      key: 'wiki',
-      label: 'Discord',
-      onClick: () => window.open(DISCORD, '__blank'),
-    },
-    {
-      icon: <Icon icon={Heart} />,
-      key: 'about',
-      label: t('about'),
-      onClick: () => window.open(ABOUT, '__blank'),
-    },
-    {
-      type: 'divider',
-    },
-    {
-      icon: <Icon icon={Settings} />,
-      key: 'setting',
-      label: (
-        <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
-          {t('setting')} {hasNewVersion && <Badge count={t('upgradeVersion.hasNew')} />}
-        </Flexbox>
-      ),
-      onClick: () => {
-        router.push('/settings/common');
-      },
-    },
-  ];
-
   return (
     <>
       <Link aria-label={'GitHub'} href={GITHUB} target={'_blank'}>
@@ -126,19 +17,6 @@ const BottomActions = memo<BottomActionProps>(({ tab }) => {
       <Link aria-label={t('document')} href={DOCUMENTS} target={'_blank'}>
         <ActionIcon icon={Book} placement={'right'} title={t('document')} />
       </Link>
-      <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        {hasNewVersion ? (
-          <Flexbox>
-            <ConfigProvider theme={{ components: { Badge: { dotSize: 8 } } }}>
-              <Badge dot offset={[-4, 4]}>
-                <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
-              </Badge>
-            </ConfigProvider>
-          </Flexbox>
-        ) : (
-          <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
-        )}
-      </Dropdown>
     </>
   );
 });

package/src/app/(main)/@nav/_layout/Desktop/index.tsx

@@ -14,7 +14,7 @@ const Nav = memo(() => {
   return (
     <SideNav
       avatar={<Avatar />}
-      bottomActions={<BottomActions tab={sidebarKey} />}
+      bottomActions={<BottomActions />}
       style={{ height: '100%', zIndex: 100 }}
       topActions={<TopActions tab={sidebarKey} />}
     />

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

@@ -10,13 +10,12 @@ import { useTranslation } from 'react-i18next';
 import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
-import { useOAuthSession } from '@/hooks/useOAuthSession';
 import { useChatStore } from '@/store/chat';
 import { useFileStore } from '@/store/file';
 import { useSessionStore } from '@/store/session';
 import { useToolStore } from '@/store/tool';
 import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
+import { settingsSelectors, userProfileSelectors } from '@/store/user/selectors';
 
 type SettingItemGroup = ItemGroup;
 
@@ -29,7 +28,8 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
 
-  const { user, isOAuthLoggedIn } = useOAuthSession();
+  const isSignedIn = useUserStore((s) => s.isSignedIn);
+  const user = useUserStore(userProfileSelectors.userProfile, isEqual);
 
   const [clearSessions, clearSessionGroups] = useSessionStore((s) => [
     s.clearSessions,
@@ -110,18 +110,18 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin
         name: 'password',
       },
       {
-        children: isOAuthLoggedIn ? (
+        children: isSignedIn ? (
           <Button onClick={handleSignOut}>{t('settingSystem.oauth.signout.action')}</Button>
         ) : (
           <Button onClick={handleSignIn} type="primary">
             {t('settingSystem.oauth.signin.action')}
           </Button>
         ),
-        desc: isOAuthLoggedIn
+        desc: isSignedIn
           ? `${user?.email} ${t('settingSystem.oauth.info.desc')}`
           : t('settingSystem.oauth.signin.desc'),
         hidden: !showOAuthLogin,
-        label: isOAuthLoggedIn
+        label: isSignedIn
           ? t('settingSystem.oauth.info.title')
           : t('settingSystem.oauth.signin.title'),
         minWidth: undefined,

package/src/features/AgentSetting/AgentMeta/AutoGenerateInput.tsx

@@ -5,37 +5,42 @@ import { Wand2 } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+
 export interface AutoGenerateInputProps extends InputProps {
+  canAutoGenerate?: boolean;
   loading?: boolean;
   onGenerate?: () => void;
 }
 
-const AutoGenerateInput = memo<AutoGenerateInputProps>(({ loading, onGenerate, ...props }) => {
-  const { t } = useTranslation('common');
-  const theme = useTheme();
+const AutoGenerateInput = memo<AutoGenerateInputProps>(
+  ({ loading, onGenerate, canAutoGenerate, ...props }) => {
+    const { t } = useTranslation('common');
+    const theme = useTheme();
 
-  return (
-    <Input
-      suffix={
-        onGenerate && (
-          <ActionIcon
-            active
-            icon={Wand2}
-            loading={loading}
-            onClick={onGenerate}
-            size={'small'}
-            style={{
-              color: theme.colorInfo,
-              marginRight: -4,
-            }}
-            title={t('autoGenerate')}
-          />
-        )
-      }
-      type={'block'}
-      {...props}
-    />
-  );
-});
+    return (
+      <Input
+        suffix={
+          onGenerate && (
+            <ActionIcon
+              active
+              disable={!canAutoGenerate}
+              icon={Wand2}
+              loading={loading}
+              onClick={onGenerate}
+              size="small"
+              style={{
+                color: theme.colorInfo,
+                marginRight: -4,
+              }}
+              title={t('autoGenerate')}
+            />
+          )
+        }
+        type="block"
+        {...props}
+      />
+    );
+  },
+);
 
 export default AutoGenerateInput;

package/src/features/AgentSetting/AgentMeta/AutoGenerateSelect.tsx

@@ -7,12 +7,13 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface AutoGenerateInputProps extends SelectProps {
+  canAutoGenerate?: boolean;
   loading?: boolean;
   onGenerate?: () => void;
 }
 
 const AutoGenerateSelect = memo<AutoGenerateInputProps>(
-  ({ loading, onGenerate, value, ...props }) => {
+  ({ loading, onGenerate, value, canAutoGenerate, ...props }) => {
     const { t } = useTranslation('common');
     const theme = useTheme();
 
@@ -25,6 +26,7 @@ const AutoGenerateSelect = memo<AutoGenerateInputProps>(
           onGenerate && (
             <ActionIcon
               active
+              disable={!canAutoGenerate}
               icon={Wand2}
               loading={loading}
               onClick={onGenerate}

package/src/features/AgentSetting/AgentMeta/index.tsx

@@ -63,6 +63,8 @@ const AgentMeta = memo(() => {
     return {
       children: (
         <AutoGenerate
+          canAutoGenerate={hasSystemRole}
+          disabled={!hasSystemRole}
           loading={loading[item.key as keyof SessionLoadingState]}
           onChange={item.onChange}
           onGenerate={() => {

package/src/features/AvatarWithUpload/index.tsx

@@ -1,49 +1,21 @@
 'use client';
 
 import { Upload } from 'antd';
-import { createStyles } from 'antd-style';
-import NextImage from 'next/image';
-import { CSSProperties, memo, useCallback } from 'react';
+import { memo, useCallback } from 'react';
 
-import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
 import { useUserStore } from '@/store/user';
-import { userProfileSelectors } from '@/store/user/selectors';
 import { imageToBase64 } from '@/utils/imageToBase64';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
 
-const useStyle = createStyles(
-  ({ css, token }) => css`
-    cursor: pointer;
-    overflow: hidden;
-    border-radius: 50%;
-    transition:
-      scale 400ms ${token.motionEaseOut},
-      box-shadow 100ms ${token.motionEaseOut};
+import UserAvatar, { type UserAvatarProps } from '../User/UserAvatar';
 
-    &:hover {
-      box-shadow: 0 0 0 3px ${token.colorText};
-    }
-
-    &:active {
-      scale: 0.8;
-    }
-  `,
-);
-
-interface AvatarWithUploadProps {
+interface AvatarWithUploadProps extends UserAvatarProps {
   compressSize?: number;
-  id?: string;
-  size?: number;
-  style?: CSSProperties;
 }
 
 const AvatarWithUpload = memo<AvatarWithUploadProps>(
-  ({ size = 40, compressSize = 256, style, id }) => {
-    const { styles } = useStyle();
-    const [avatar, updateAvatar] = useUserStore((s) => [
-      userProfileSelectors.userAvatar(s),
-      s.updateAvatar,
-    ]);
+  ({ size = 40, compressSize = 256, ...rest }) => {
+    const updateAvatar = useUserStore((s) => s.updateAvatar);
 
     const handleUploadAvatar = useCallback(
       createUploadImageHandler((avatar) => {
@@ -58,17 +30,9 @@ const AvatarWithUpload = memo<AvatarWithUploadProps>(
     );
 
     return (
-      <div className={styles} id={id} style={{ maxHeight: size, maxWidth: size, ...style }}>
-        <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
-          <NextImage
-            alt={avatar ? 'userAvatar' : 'LobeChat'}
-            height={size}
-            src={!!avatar ? avatar : DEFAULT_USER_AVATAR_URL}
-            unoptimized
-            width={size}
-          />
-        </Upload>
-      </div>
+      <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
+        <UserAvatar clickable size={size} {...rest} />
+      </Upload>
     );
   },
 );

package/src/features/DataImporter/index.tsx

@@ -14,6 +14,15 @@ const useStyles = createStyles(({ css, token }) => {
   const size = 28;
 
   return {
+    children: css`
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: transparent;
+      }
+    `,
+
     loader: css`
       transform: translateX(-${size * 2}px);
 
@@ -231,7 +240,8 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
         maxCount={1}
         showUploadList={false}
       >
-        {children}
+        {/* a very hackable solution: add a pseudo before to have a large hot zone */}
+        <div className={styles.children}>{children}</div>
       </Upload>
     </>
   );

package/src/features/User/UserAvatar.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { Avatar, type AvatarProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
+import { useUserStore } from '@/store/user';
+import { userProfileSelectors } from '@/store/user/selectors';
+
+const useStyles = createStyles(({ css, token }) => ({
+  clickable: css`
+    position: relative;
+    transition: all 200ms ease-out 0s;
+
+    &::before {
+      content: '';
+
+      position: absolute;
+      transform: skewX(-45deg) translateX(-400%);
+
+      overflow: hidden;
+
+      box-sizing: border-box;
+      width: 25%;
+      height: 100%;
+
+      background: rgba(255, 255, 255, 50%);
+
+      transition: all 200ms ease-out 0s;
+    }
+
+    &:hover {
+      box-shadow: 0 0 0 2px ${token.colorPrimary};
+
+      &::before {
+        transform: skewX(-45deg) translateX(400%);
+      }
+    }
+  `,
+}));
+
+export interface UserAvatarProps extends AvatarProps {
+  clickable?: boolean;
+}
+
+const UserAvatar = memo<UserAvatarProps>(
+  ({ size = 40, background, clickable, className, ...rest }) => {
+    const { styles, cx } = useStyles();
+    const avatar = useUserStore(userProfileSelectors.userAvatar);
+    return (
+      <Avatar
+        alt={avatar ? 'UserAvatar' : 'LobeChat'}
+        avatar={avatar || DEFAULT_USER_AVATAR_URL}
+        background={avatar ? background : undefined}
+        className={cx(clickable && styles.clickable, className)}
+        size={size}
+        unoptimized
+        {...rest}
+      />
+    );
+  },
+);
+
+UserAvatar.displayName = 'UserAvatar';
+
+export default UserAvatar;

package/src/features/User/UserInfo.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import UserAvatar from './UserAvatar';
+
+const DEFAULT_USERNAME = 'LobeChat Community Edition';
+
+const useStyles = createStyles(({ css, token }) => ({
+  nickname: css`
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 1;
+  `,
+  username: css`
+    line-height: 1;
+    color: ${token.colorTextDescription};
+  `,
+}));
+
+const UserInfo = memo<{ onClick?: () => void }>(({ onClick }) => {
+  const { t } = useTranslation('common');
+  const { styles, theme } = useStyles();
+
+  const DEFAULT_NICKNAME = t('userPanel.defaultNickname');
+
+  return (
+    <Flexbox align={'center'} gap={12} horizontal paddingBlock={12} paddingInline={16}>
+      <UserAvatar background={theme.colorFill} onClick={onClick} size={48} />
+      <Flexbox flex={1} gap={6}>
+        <div className={styles.nickname}>{DEFAULT_NICKNAME}</div>
+        <div className={styles.username}>{DEFAULT_USERNAME}</div>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default UserInfo;

package/src/features/User/UserPanel/LangButton.tsx

@@ -0,0 +1,57 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Popover } from 'antd';
+import { useTheme } from 'antd-style';
+import { Languages } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Menu, { type MenuProps } from '@/components/Menu';
+import { localeOptions } from '@/locales/resources';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+
+const LangButton = memo(() => {
+  const theme = useTheme();
+  const [language, switchLocale] = useUserStore((s) => [
+    settingsSelectors.currentSettings(s).language,
+    s.switchLocale,
+  ]);
+
+  const { t } = useTranslation('setting');
+
+  const items: MenuProps['items'] = useMemo(
+    () => [
+      {
+        key: 'auto',
+        label: t('settingTheme.lang.autoMode'),
+        onClick: () => switchLocale('auto'),
+      },
+      ...localeOptions.map((item) => ({
+        key: item.value,
+        label: item.label,
+        onClick: () => switchLocale(item.value),
+      })),
+    ],
+    [t],
+  );
+
+  return (
+    <Popover
+      arrow={false}
+      content={<Menu items={items} selectable selectedKeys={[language]} />}
+      overlayInnerStyle={{
+        padding: 0,
+      }}
+      placement={'right'}
+      trigger={['click', 'hover']}
+    >
+      <ActionIcon
+        icon={Languages}
+        size={{ blockSize: 32, fontSize: 16 }}
+        style={{ border: `1px solid ${theme.colorFillSecondary}` }}
+      />
+    </Popover>
+  );
+});
+
+export default LangButton;

package/src/features/User/UserPanel/Popover.tsx

@@ -0,0 +1,35 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import BrandWatermark from '@/components/BrandWatermark';
+import Menu from '@/components/Menu';
+
+import UserInfo from '../UserInfo';
+import LangButton from './LangButton';
+import ThemeButton from './ThemeButton';
+import { useMenu } from './useMenu';
+
+const PopoverContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
+  const { mainItems } = useMenu();
+
+  return (
+    <Flexbox gap={2} style={{ minWidth: 300 }}>
+      <UserInfo />
+      <Menu items={mainItems} onClick={closePopover} />
+      <Flexbox
+        align={'center'}
+        horizontal
+        justify={'space-between'}
+        style={{ padding: '6px 6px 6px 16px' }}
+      >
+        <BrandWatermark />
+        <Flexbox align={'center'} flex={'none'} gap={6} horizontal>
+          <LangButton />
+          <ThemeButton />
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default PopoverContent;

package/src/features/User/UserPanel/ThemeButton.tsx

@@ -0,0 +1,70 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Popover } from 'antd';
+import { useTheme } from 'antd-style';
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Menu, { type MenuProps } from '@/components/Menu';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+
+const themeIcons = {
+  auto: Monitor,
+  dark: Moon,
+  light: Sun,
+};
+
+const ThemeButton = memo(() => {
+  const theme = useTheme();
+  const [themeMode, switchThemeMode] = useUserStore((s) => [
+    settingsSelectors.currentSettings(s).themeMode,
+    s.switchThemeMode,
+  ]);
+
+  const { t } = useTranslation('setting');
+
+  const items: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={themeIcons.auto} />,
+        key: 'auto',
+        label: t('settingTheme.themeMode.auto'),
+        onClick: () => switchThemeMode('auto'),
+      },
+      {
+        icon: <Icon icon={themeIcons.light} />,
+        key: 'light',
+        label: t('settingTheme.themeMode.light'),
+        onClick: () => switchThemeMode('light'),
+      },
+      {
+        icon: <Icon icon={themeIcons.dark} />,
+        key: 'dark',
+        label: t('settingTheme.themeMode.dark'),
+        onClick: () => switchThemeMode('dark'),
+      },
+    ],
+    [t],
+  );
+
+  return (
+    <Popover
+      arrow={false}
+      content={<Menu items={items} selectable selectedKeys={[themeMode]} />}
+      overlayInnerStyle={{
+        padding: 0,
+      }}
+      placement={'right'}
+      trigger={['click', 'hover']}
+    >
+      <ActionIcon
+        icon={themeIcons[themeMode]}
+        size={{ blockSize: 32, fontSize: 16 }}
+        style={{ border: `1px solid ${theme.colorFillSecondary}` }}
+      />
+    </Popover>
+  );
+});
+
+export default ThemeButton;