@lobehub/chat 0.152.12 → 0.153.1

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

@@ -1,4 +1,4 @@
-import { DiscordIcon, Icon } from '@lobehub/ui';
+import { ActionIcon, DiscordIcon, Icon } from '@lobehub/ui';
 import { Badge } from 'antd';
 import {
   Book,
@@ -7,22 +7,29 @@ import {
   HardDriveUpload,
   LifeBuoy,
   Mail,
+  Maximize,
   Settings2,
 } from 'lucide-react';
 import Link from 'next/link';
 import { PropsWithChildren, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
 
 import { type MenuProps } from '@/components/Menu';
 import { DISCORD, DOCUMENTS, EMAIL_SUPPORT, GITHUB_ISSUES } from '@/const/url';
 import DataImporter from '@/features/DataImporter';
+import { useOpenSettings } from '@/hooks/useInterceptingRoutes';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { configService } from '@/services/config';
+import { SettingsTabs } from '@/store/global/initialState';
 
 import { useNewVersion } from './useNewVersion';
 
 export const useMenu = () => {
+  const router = useQueryRoute();
   const hasNewVersion = useNewVersion();
+  const openSettings = useOpenSettings();
   const { t } = useTranslation(['common', 'setting']);
 
   const NewVersionBadge = useCallback(
@@ -38,6 +45,29 @@ export const useMenu = () => {
     [t],
   );
 
+  const settings: MenuProps['items'] = [
+    {
+      icon: <Icon icon={Settings2} />,
+      key: 'setting',
+      label: (
+        <Flexbox align={'center'} horizontal>
+          <Flexbox flex={1} horizontal onClick={openSettings}>
+            <NewVersionBadge showBadge={hasNewVersion}>{t('userPanel.setting')}</NewVersionBadge>
+          </Flexbox>
+          <ActionIcon
+            icon={Maximize}
+            onClick={() => router.push(urlJoin('/settings', SettingsTabs.Common))}
+            size={'small'}
+            title={t('fullscreen')}
+          />
+        </Flexbox>
+      ),
+    },
+    {
+      type: 'divider',
+    },
+  ];
+
   const exports: MenuProps['items'] = [
     {
       icon: <Icon icon={HardDriveUpload} />,
@@ -79,21 +109,6 @@ export const useMenu = () => {
     },
   ];
 
-  const settings: MenuProps['items'] = [
-    {
-      icon: <Icon icon={Settings2} />,
-      key: 'setting',
-      label: (
-        <Link href={'/settings'}>
-          <NewVersionBadge showBadge={hasNewVersion}>{t('userPanel.setting')}</NewVersionBadge>
-        </Link>
-      ),
-    },
-    {
-      type: 'divider',
-    },
-  ];
-
   const helps: MenuProps['items'] = [
     {
       icon: <Icon icon={DiscordIcon} />,

package/src/hooks/useInterceptingRoutes.test.ts

@@ -0,0 +1,70 @@
+import { renderHook } from '@testing-library/react';
+import urlJoin from 'url-join';
+import { describe, expect, it, vi } from 'vitest';
+
+import { INBOX_SESSION_ID } from '@/const/session';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useGlobalStore } from '@/store/global';
+import { ChatSettingsTabs, SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
+import { useSessionStore } from '@/store/session';
+
+import { useOpenChatSettings, useOpenSettings } from './useInterceptingRoutes';
+
+// Mocks
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(() => ({
+    push: vi.fn((href) => href),
+    replace: vi.fn((href) => href),
+  })),
+}));
+vi.mock('@/hooks/useQuery', () => ({
+  useQuery: vi.fn(() => ({})),
+}));
+vi.mock('@/hooks/useIsMobile', () => ({
+  useIsMobile: vi.fn(),
+}));
+vi.mock('@/store/session', () => ({
+  useSessionStore: vi.fn(),
+}));
+vi.mock('@/store/global', () => ({
+  useGlobalStore: {
+    setState: vi.fn(),
+  },
+}));
+
+describe('useOpenSettings', () => {
+  it('should handle mobile route correctly', () => {
+    vi.mocked(useIsMobile).mockReturnValue(true);
+    const { result } = renderHook(() => useOpenSettings(SettingsTabs.Common));
+    expect(result.current()).toBe('/settings/common');
+  });
+
+  it('should handle desktop route correctly', () => {
+    vi.mocked(useIsMobile).mockReturnValue(false);
+    const { result } = renderHook(() => useOpenSettings(SettingsTabs.Agent));
+    expect(result.current()).toBe('/settings/modal?tab=agent');
+  });
+});
+
+describe('useOpenChatSettings', () => {
+  it('should handle inbox session id correctly', () => {
+    vi.mocked(useSessionStore).mockReturnValue(INBOX_SESSION_ID);
+    const { result } = renderHook(() => useOpenChatSettings());
+
+    expect(result.current()).toBe('/settings/modal?session=inbox&tab=agent'); // Assuming openSettings returns a function
+  });
+
+  it('should handle mobile route for chat settings', () => {
+    vi.mocked(useSessionStore).mockReturnValue('123');
+    vi.mocked(useIsMobile).mockReturnValue(true);
+    const { result } = renderHook(() => useOpenChatSettings(ChatSettingsTabs.Meta));
+    expect(result.current()).toBe('/chat/settings');
+  });
+
+  it('should handle desktop route for chat settings with session and tab', () => {
+    vi.mocked(useSessionStore).mockReturnValue('456');
+    vi.mocked(useIsMobile).mockReturnValue(false);
+    const { result } = renderHook(() => useOpenChatSettings(ChatSettingsTabs.Meta));
+    expect(result.current()).toBe('/chat/settings/modal?session=456&tab=meta');
+  });
+});

package/src/hooks/useInterceptingRoutes.ts

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import urlJoin from 'url-join';
+
+import { INBOX_SESSION_ID } from '@/const/session';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useGlobalStore } from '@/store/global';
+import { ChatSettingsTabs, SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
+import { useSessionStore } from '@/store/session';
+
+export const useOpenSettings = (tab: SettingsTabs = SettingsTabs.Common) => {
+  const activeId = useSessionStore((s) => s.activeId);
+  const router = useQueryRoute();
+  const mobile = useIsMobile();
+
+  return useMemo(() => {
+    if (mobile) {
+      return () => router.push(urlJoin('/settings', tab));
+    } else {
+      // use Intercepting Routes on Desktop
+      return () => router.push('/settings/modal', { query: { session: activeId, tab } });
+    }
+  }, [mobile, tab, activeId, router]);
+};
+
+export const useOpenChatSettings = (tab: ChatSettingsTabs = ChatSettingsTabs.Meta) => {
+  const activeId = useSessionStore((s) => s.activeId);
+  const openSettings = useOpenSettings(SettingsTabs.Agent);
+  const router = useQueryRoute();
+  const mobile = useIsMobile();
+
+  return useMemo(() => {
+    if (activeId === INBOX_SESSION_ID) {
+      useGlobalStore.setState({
+        sidebarKey: SidebarTabKey.Setting,
+      });
+      return openSettings;
+    }
+    if (mobile) {
+      return () => router.push('/chat/settings');
+    } else {
+      // use Intercepting Routes on Desktop
+      return () => router.push('/chat/settings/modal', { query: { session: activeId, tab } });
+    }
+  }, [openSettings, mobile, activeId, router, tab]);
+};

package/src/hooks/useQuery.test.ts

@@ -1,5 +1,4 @@
 import { renderHook } from '@testing-library/react';
-import { useSearchParams } from 'next/navigation';
 import { describe, expect, it, vi } from 'vitest';
 
 import { useQuery } from './useQuery';

package/src/hooks/useQuery.ts

@@ -1,7 +1,8 @@
 import { useSearchParams } from 'next/navigation';
 import qs from 'query-string';
+import { useMemo } from 'react';
 
 export const useQuery = () => {
   const rawQuery = useSearchParams();
-  return qs.parse(rawQuery.toString());
+  return useMemo(() => qs.parse(rawQuery.toString()), [rawQuery]);
 };

package/src/layout/GlobalProvider/StoreInitialization.tsx

@@ -49,12 +49,19 @@ const StoreInitialization = memo(() => {
 
   useEffect(() => {
     router.prefetch('/chat');
-    router.prefetch('/chat/settings');
     router.prefetch('/market');
-    router.prefetch('/settings/common');
-    router.prefetch('/settings/agent');
-    router.prefetch('/settings/sync');
-  }, [router]);
+
+    if (mobile) {
+      router.prefetch('/me');
+      router.prefetch('/chat/settings');
+      router.prefetch('/settings/common');
+      router.prefetch('/settings/agent');
+      router.prefetch('/settings/sync');
+    } else {
+      router.prefetch('/chat/settings/modal');
+      router.prefetch('/settings/modal');
+    }
+  }, [router, mobile]);
 
   return null;
 });

package/src/locales/default/common.ts

@@ -28,8 +28,9 @@ export default {
   },
   feedback: '反馈与建议',
   follow: '在 {{name}} 上关注我们',
-  historyRange: '历史范围',
+  fullscreen: '全屏模式',
 
+  historyRange: '历史范围',
   import: '导入配置',
   importModal: {
     finish: {
@@ -136,6 +137,7 @@ export default {
     me: '我',
     setting: '设置',
   },
+
   telemetry: {
     allow: '允许',
     deny: '拒绝',
@@ -143,7 +145,6 @@ export default {
     learnMore: '了解更多',
     title: '帮助 LobeChat 做得更好',
   },
-
   temp: '临时',
   terms: '服务条款',
   updateAgent: '更新助理信息',
@@ -162,6 +163,7 @@ export default {
     help: '帮助中心',
     moveGuide: '设置按钮搬到这里啦',
     plans: '订阅方案',
+    preview: '预览版',
     profile: '账户管理',
     setting: '应用设置',
     usages: '用量统计',

package/src/store/global/initialState.ts

@@ -10,6 +10,15 @@ export enum SidebarTabKey {
   Setting = 'settings',
 }
 
+export enum ChatSettingsTabs {
+  Chat = 'chat',
+  Meta = 'meta',
+  Modal = 'modal',
+  Plugin = 'plugin',
+  Prompt = 'prompt',
+  TTS = 'tts',
+}
+
 export enum SettingsTabs {
   About = 'about',
   Agent = 'agent',

package/src/styles/mobileHeader.ts

@@ -6,3 +6,10 @@ export const mobileHeaderSticky: CSSProperties = {
   width: '100%',
   zIndex: 100,
 };
+
+export const mobileHeaderFixed: CSSProperties = {
+  position: 'fixed',
+  top: 0,
+  width: '100%',
+  zIndex: 100,
+};

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

@@ -1,35 +0,0 @@
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import UserAvatar from '@/features/User/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;