@lobehub/chat 0.152.0 → 0.152.2

package/src/app/(main)/@nav/features/UserAvatar.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { Avatar, type AvatarProps } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
+import { useUserStore } from '@/store/user';
+import { commonSelectors } from '@/store/user/selectors';
+
+const UserAvatar = memo<AvatarProps>(({ size = 40, background, ...rest }) => {
+  const avatar = useUserStore(commonSelectors.userAvatar);
+  return (
+    <Avatar
+      avatar={avatar || DEFAULT_USER_AVATAR_URL}
+      background={avatar ? background : undefined}
+      size={size}
+      {...rest}
+    />
+  );
+});
+
+UserAvatar.displayName = 'UserAvatar';
+
+export default UserAvatar;

package/src/app/(main)/@nav/features/UserPanel/LangButton.tsx

@@ -0,0 +1,55 @@
+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';
+import { switchLang } from '@/utils/client/switchLang';
+
+const LangButton = memo(() => {
+  const theme = useTheme();
+  const language = useUserStore((s) => settingsSelectors.currentSettings(s).language);
+
+  const { t } = useTranslation('setting');
+
+  const items: MenuProps['items'] = useMemo(
+    () => [
+      {
+        key: 'auto',
+        label: t('settingTheme.lang.autoMode'),
+        onClick: () => switchLang('auto'),
+      },
+      ...localeOptions.map((item) => ({
+        key: item.value,
+        label: item.label,
+        onClick: () => switchLang(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/app/(main)/@nav/features/UserPanel/Popover.tsx

@@ -0,0 +1,34 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import BrandWatermark from '@/components/BrandWatermark';
+import Menu from '@/components/Menu';
+
+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/app/(main)/@nav/features/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;

package/src/app/(main)/@nav/features/UserPanel/UserInfo.tsx

@@ -0,0 +1,35 @@
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import UserAvatar from '../UserAvatar';
+
+const useStyles = createStyles(({ css, token }) => ({
+  nickname: css`
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 1;
+  `,
+  username: css`
+    line-height: 1;
+    color: ${token.colorTextDescription};
+  `,
+}));
+
+// TODO
+
+const UserInfo = memo<{ onClick?: () => void }>(({ onClick }) => {
+  const { styles, theme } = useStyles();
+
+  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}>{'社区版用户'}</div>
+        <div className={styles.username}> {'Community Edition'}</div>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default UserInfo;

package/src/app/(main)/@nav/features/UserPanel/index.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Alert } from '@lobehub/ui';
+import { Badge, ConfigProvider, Popover } from 'antd';
+import { createStyles } from 'antd-style';
+import { PropsWithChildren, memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import PopoverContent from './Popover';
+import { useNewVersion } from './useNewVersion';
+
+const useStyles = createStyles(({ css }) => ({
+  popover: css`
+    top: 8px !important;
+    left: 8px !important;
+  `,
+}));
+
+const UserPanel = memo<PropsWithChildren<{ bottom?: boolean }>>(({ children, bottom }) => {
+  const hasNewVersion = useNewVersion();
+  const [open, setOpen] = useState(false);
+  const { styles } = useStyles();
+  const { t } = useTranslation('common');
+
+  const AvararBadge = useCallback(
+    ({ children: badgeChildren, showBadge }: PropsWithChildren<{ showBadge?: boolean }>) => {
+      if (bottom || !showBadge) return badgeChildren;
+      return (
+        <Flexbox>
+          <ConfigProvider theme={{ components: { Badge: { dotSize: 8 } } }}>
+            <Badge dot offset={[-4, 4]}>
+              {badgeChildren}
+            </Badge>
+          </ConfigProvider>
+        </Flexbox>
+      );
+    },
+    [],
+  );
+
+  return (
+    <AvararBadge showBadge={hasNewVersion}>
+      <Popover
+        arrow={false}
+        content={
+          <>
+            {bottom && <Alert banner message={t('userPanel.warn')} type={'warning'} />}
+            <PopoverContent closePopover={() => setOpen(false)} />
+          </>
+        }
+        onOpenChange={setOpen}
+        open={open}
+        overlayInnerStyle={{
+          padding: 0,
+        }}
+        placement={'topRight'}
+        rootClassName={bottom ? undefined : styles.popover}
+        trigger={['click']}
+      >
+        {children}
+      </Popover>
+    </AvararBadge>
+  );
+});
+
+UserPanel.displayName = 'UserPanel';
+
+export default UserPanel;

package/src/app/(main)/@nav/features/UserPanel/useMenu.tsx

@@ -0,0 +1,144 @@
+import { DiscordIcon, Icon } from '@lobehub/ui';
+import { Badge } from 'antd';
+import {
+  Book,
+  Feather,
+  HardDriveDownload,
+  HardDriveUpload,
+  LifeBuoy,
+  Mail,
+  Settings2,
+} from 'lucide-react';
+import { PropsWithChildren, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { type MenuProps } from '@/components/Menu';
+import { AGENTS_INDEX_GITHUB_ISSUE, DISCORD, DOCUMENTS, EMAIL_SUPPORT } from '@/const/url';
+import DataImporter from '@/features/DataImporter';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { configService } from '@/services/config';
+
+import { useNewVersion } from './useNewVersion';
+
+export const useMenu = () => {
+  const router = useQueryRoute();
+  const hasNewVersion = useNewVersion();
+
+  const { t } = useTranslation(['common', 'setting']);
+
+  const NewVersionBadge = useCallback(
+    ({ children, showBadge }: PropsWithChildren & { showBadge?: boolean }) => {
+      if (!showBadge) return children;
+      return (
+        <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal width={'100%'}>
+          <span>{children}</span>
+          <Badge count={t('upgradeVersion.hasNew')} />
+        </Flexbox>
+      );
+    },
+    [t],
+  );
+
+  const exports: 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',
+    },
+  ];
+
+  const settings: MenuProps['items'] = [
+    {
+      icon: <Icon icon={Settings2} />,
+      key: 'setting',
+      label: <NewVersionBadge showBadge={hasNewVersion}>{t('userPanel.setting')}</NewVersionBadge>,
+      onClick: () => {
+        router.push('/settings/common');
+      },
+    },
+    {
+      type: 'divider',
+    },
+  ];
+
+  const helps: MenuProps['items'] = [
+    {
+      icon: <Icon icon={DiscordIcon} />,
+      key: 'discord',
+      label: t('userPanel.discord'),
+      onClick: () => window.open(DISCORD, '__blank'),
+    },
+    {
+      children: [
+        {
+          icon: <Icon icon={Book} />,
+          key: 'docs',
+          label: t('userPanel.docs'),
+          onClick: () => window.open(DOCUMENTS, '__blank'),
+        },
+        {
+          icon: <Icon icon={Feather} />,
+          key: 'feedback',
+          label: t('userPanel.feedback'),
+          onClick: () => window.open(AGENTS_INDEX_GITHUB_ISSUE, '__blank'),
+        },
+        {
+          icon: <Icon icon={Mail} />,
+          key: 'email',
+          label: t('userPanel.email'),
+          onClick: () => window.open(`mailto:${EMAIL_SUPPORT}`, '__blank'),
+        },
+      ],
+      icon: <Icon icon={LifeBuoy} />,
+      key: 'help',
+      label: t('userPanel.help'),
+    },
+  ];
+
+  const mainItems = [
+    ...settings,
+    ...exports,
+    ...helps,
+    {
+      type: 'divider',
+    },
+  ].filter(Boolean) as MenuProps['items'];
+
+  return {
+    mainItems,
+  };
+};

package/src/app/(main)/@nav/features/UserPanel/useNewVersion.tsx

@@ -0,0 +1,12 @@
+import { useGlobalStore } from '@/store/global';
+
+export const useNewVersion = () => {
+  const [hasNewVersion, useCheckLatestVersion] = useGlobalStore((s) => [
+    s.hasNewVersion,
+    s.useCheckLatestVersion,
+  ]);
+
+  useCheckLatestVersion();
+
+  return hasNewVersion;
+};

package/src/app/(main)/chat/(mobile)/features/SessionHeader.tsx

@@ -33,7 +33,7 @@ const Header = memo(() => {
     <MobileNavBar
       left={
         <Flexbox align={'center'} gap={8} horizontal style={{ marginLeft: 8 }}>
-          <div onClick={() => router.push('/settings')}>
+          <div onClick={() => router.push('/me')}>
             {avatar ? <Avatar avatar={avatar} size={28} /> : <Logo size={28} />}
           </div>
           <Logo type={'text'} />

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

@@ -1,13 +1,9 @@
-'use client';
-
-import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ClientResponsiveLayout from '@/components/client/ClientResponsiveLayout';
-
+import { LayoutProps } from '../type';
 import ResponsiveSessionList from './SessionList';
 
-const Desktop = memo(({ children }: PropsWithChildren) => {
+const Layout = ({ children }: LayoutProps) => {
   return (
     <>
       <ResponsiveSessionList />
@@ -21,6 +17,8 @@ const Desktop = memo(({ children }: PropsWithChildren) => {
       </Flexbox>
     </>
   );
-});
+};
+
+Layout.displayName = 'DesktopChatLayout';
 
-export default ClientResponsiveLayout({ Desktop, Mobile: () => import('../Mobile') });
+export default Layout;

package/src/app/(main)/chat/_layout/Mobile/index.tsx

@@ -1,7 +1,9 @@
-import { PropsWithChildren } from 'react';
+import { LayoutProps } from '../type';
 
-const MobileLayout = ({ children }: PropsWithChildren) => {
+const Layout = ({ children }: LayoutProps) => {
   return children;
 };
 
-export default MobileLayout;
+Layout.displayName = 'MobileChatLayout';
+
+export default Layout;

package/src/app/(main)/chat/_layout/type.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export interface LayoutProps {
+  children: ReactNode;
+}

package/src/app/(main)/chat/features/SettingButton.tsx

@@ -5,6 +5,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import redirectHard from '@/server/redirectHard';
 import { useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
@@ -16,6 +17,8 @@ const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('common');
   const router = useRouter();
 
+  const push = mobile ? redirectHard : router.push;
+
   return (
     <ActionIcon
       icon={AlignJustify}
@@ -24,9 +27,9 @@ const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
           useGlobalStore.setState({
             sidebarKey: SidebarTabKey.Setting,
           });
-          router.push('/settings/agent');
+          push('/settings/agent');
         } else {
-          router.push(pathString('/chat/settings', { search: location.search }));
+          push(pathString('/chat/settings', { search: location.search }));
         }
       }}
       size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}

package/src/app/(main)/chat/layout.ts

@@ -2,7 +2,10 @@ import ServerLayout from '@/components/server/ServerLayout';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
 
-const ChatLayout = ServerLayout({ Desktop, Mobile });
+const Layout = ServerLayout<LayoutProps>({ Desktop, Mobile });
 
-export default ChatLayout;
+Layout.displayName = 'ChatLayout';
+
+export default Layout;

package/src/app/(main)/chat/settings/{(desktop) → _layout/Desktop}/Header.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';

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

@@ -0,0 +1,32 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import SafeSpacing from '@/components/SafeSpacing';
+import { HEADER_HEIGHT } from '@/const/layoutTokens';
+
+import Header from './Header';
+
+const Layout = ({ children }: PropsWithChildren) => (
+  <>
+    <Header />
+    <Flexbox
+      align={'center'}
+      height={'100%'}
+      style={{ overflowX: 'hidden', overflowY: 'auto' }}
+      width={'100%'}
+    >
+      <SafeSpacing height={HEADER_HEIGHT - 16} />
+      <Flexbox
+        gap={64}
+        style={{ maxWidth: 1024, padding: '1.75rem 1.5rem 1.75rem 2rem' }}
+        width={'100%'}
+      >
+        {children}
+      </Flexbox>
+    </Flexbox>
+  </>
+);
+
+Layout.displayName = 'DesktopSessionSettingsLayout';
+
+export default Layout;

package/src/app/(main)/chat/settings/{(mobile) → _layout/Mobile}/Header.tsx

@@ -1,13 +1,14 @@
+'use client';
+
 import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import HeaderContent from '@/app/(main)/chat/settings/features/HeaderContent';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 import { pathString } from '@/utils/url';
 
-import HeaderContent from '../features/HeaderContent';
-
 const Header = memo(() => {
   const { t } = useTranslation('setting');
   const router = useRouter();

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

@@ -0,0 +1,15 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
+import Header from './Header';
+
+const Layout = ({ children }: PropsWithChildren) => (
+  <MobileContentLayout header={<Header />}>{children}</MobileContentLayout>
+);
+
+Layout.displayName = 'MobileSessionSettingsLayout';
+
+export default Layout;

package/src/app/(main)/chat/settings/error.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'), { ssr: false });

package/src/app/(main)/chat/settings/features/HeaderContent.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Dropdown, MenuProps } from 'antd';
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button, Dropdown, MenuProps } from 'antd';
 import { useResponsive } from 'antd-style';
 import { HardDriveDownload } from 'lucide-react';
 import { memo, useMemo } from 'react';
@@ -11,7 +11,7 @@ import { useSessionStore } from '@/store/session';
 
 import SubmitAgentButton from './SubmitAgentButton';
 
-export const HeaderContent = memo<{ mobile?: boolean }>(() => {
+export const HeaderContent = memo<{ mobile?: boolean; modal?: boolean }>(({ modal }) => {
   const { t } = useTranslation('setting');
   const id = useSessionStore((s) => s.activeId);
 
@@ -43,13 +43,19 @@ export const HeaderContent = memo<{ mobile?: boolean }>(() => {
 
   return (
     <>
-      <SubmitAgentButton />
+      <SubmitAgentButton modal={modal} />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        <ActionIcon
-          icon={HardDriveDownload}
-          size={HEADER_ICON_SIZE(mobile)}
-          title={t('export', { ns: 'common' })}
-        />
+        {modal ? (
+          <Button block icon={<Icon icon={HardDriveDownload} />}>
+            {t('export', { ns: 'common' })}
+          </Button>
+        ) : (
+          <ActionIcon
+            icon={HardDriveDownload}
+            size={HEADER_ICON_SIZE(mobile)}
+            title={t('export', { ns: 'common' })}
+          />
+        )}
       </Dropdown>
     </>
   );