@lobehub/chat 0.152.9 → 0.152.11

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)/chat/features/SessionListContent/ListItem/index.tsx

@@ -21,11 +21,14 @@ const useStyles = createStyles(({ css, token, responsive }) => {
         border-radius: 0;
       }
     `,
+    title: css`
+      line-height: 1.2;
+    `,
   };
 });
 
 const ListItem = memo<ListItemProps & { avatar: string; avatarBackground?: string }>(
-  ({ avatar, avatarBackground, active, showAction, actions, ...props }) => {
+  ({ avatar, avatarBackground, active, showAction, actions, title, ...props }) => {
     const ref = useRef(null);
     const isHovering = useHover(ref);
     const { mobile } = useResponsive();
@@ -52,6 +55,7 @@ const ListItem = memo<ListItemProps & { avatar: string; avatarBackground?: strin
         className={styles.container}
         ref={ref}
         showAction={actions && (isHovering || showAction)}
+        title={<span className={styles.title}>{title}</span>}
         {...(props as any)}
       />
     );

package/src/app/(main)/market/features/AgentCard/index.tsx

@@ -28,12 +28,13 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
     background: ${token.colorBgContainer};
     border-radius: ${token.borderRadiusLG}px;
-    box-shadow: 0 0 1px 1px ${token.colorFillQuaternary} inset;
+    box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
+      inset;
 
     transition: box-shadow 0.2s ${token.motionEaseInOut};
 
     &:hover {
-      box-shadow: 0 0 1px 1px ${token.colorFillSecondary} inset;
+      box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillSecondary : token.colorFill} inset;
     }
   `,
   desc: css`
@@ -50,6 +51,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   title: css`
     margin-bottom: 0 !important;
     font-size: 18px !important;
+    font-weight: bold;
   `,
 }));
 

package/src/app/(main)/market/features/AgentList.tsx

@@ -58,7 +58,16 @@ const AgentList = memo<AgentListProps>(({ mobile }) => {
     [],
   );
 
-  if (isLoading) return <Skeleton paragraph={{ rows: 8 }} title={false} />;
+  if (isLoading || (!searchKeywords && agentList?.length === 0)) {
+    return (
+      <>
+        <h2 className={styles.title}>{t('title.recentSubmits')}</h2>
+        <Skeleton paragraph={{ rows: 8 }} title={false} />
+        <h2 className={styles.title}>{t('title.allAgents')}</h2>
+        <Skeleton paragraph={{ rows: 8 }} title={false} />
+      </>
+    );
+  }
 
   if (searchKeywords) {
     if (agentList.length === 0) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;

package/src/app/(main)/market/features/TagList.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from 'antd';
+import { Button, Skeleton } from 'antd';
 import { createStyles, useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { startCase } from 'lodash-es';
@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   active: css`
     color: ${token.colorBgLayout};
     background: ${token.colorPrimary};
@@ -20,11 +20,11 @@ const useStyles = createStyles(({ css, token }) => ({
     }
   `,
   tag: css`
-    background: ${token.colorBgContainer};
+    background: ${isDarkMode ? token.colorBgContainer : token.colorFillTertiary};
     border: none;
 
     &:hover {
-      background: ${token.colorBgElevated} !important;
+      background: ${isDarkMode ? token.colorBgElevated : token.colorFill} !important;
     }
   `,
 }));
@@ -38,6 +38,10 @@ const TagList = memo(() => {
   ]);
   const agentTagList = useMarketStore(agentMarketSelectors.getAgentTagList, isEqual);
 
+  if (agentTagList?.length === 0) {
+    return <Skeleton paragraph={{ rows: 4 }} title={false} />;
+  }
+
   const list = md ? agentTagList : agentTagList.slice(0, 20);
 
   return (

package/src/app/(main)/settings/_layout/Desktop/Header.tsx

@@ -21,6 +21,7 @@ const useStyles = createStyles(({ token, css }) => ({
   title: css`
     font-size: 18px;
     font-weight: 700;
+    line-height: 1.2;
   `,
 }));
 

package/src/app/(main)/settings/_layout/Mobile/Header.tsx

@@ -22,7 +22,7 @@ const Header = memo(() => {
         <MobileNavBarTitle
           title={
             <Flexbox align={'center'} gap={4} horizontal>
-              {t(`tab.${activeSettingsKey}`)}
+              <span style={{ lineHeight: 1.2 }}> {t(`tab.${activeSettingsKey}`)}</span>
               {activeSettingsKey === SettingsTabs.Sync && (
                 <Tag color={'gold'}>{t('tab.experiment')}</Tag>
               )}

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/components/Cell/Divider.tsx

@@ -4,9 +4,9 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 
 const useStyles = createStyles(
-  ({ css, token }) => css`
+  ({ css, token, isDarkMode }) => css`
     height: 6px;
-    background: ${token.colorBgLayout};
+    background: ${isDarkMode ? token.colorBgContainer : token.colorBgLayout};
   `,
 );
 

package/src/components/Cell/index.tsx

@@ -5,10 +5,11 @@ import { ReactNode, memo } from 'react';
 
 const { Item } = List;
 
-const useStyles = createStyles(({ css }) => ({
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css`
     position: relative;
     padding-block: 16px !important;
+    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
     border-radius: 0;
   `,
 }));

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;