@lobehub/lobehub 2.0.0-next.72 → 2.0.0-next.74

package/src/features/KnowledgeManager/Header/FilesSearchBar.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { SearchBar } from '@lobehub/ui';
-import { useQueryState } from 'nuqs';
 import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 import { HotkeyEnum } from '@/types/hotkey';

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

@@ -1,5 +1,4 @@
-import { enableNextAuth, isDesktop } from '@lobechat/const';
-import Link from 'next/link';
+import { Link } from 'react-router-dom';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -15,6 +14,8 @@ import UserLoginOrSignup from '../UserLoginOrSignup';
 import LangButton from './LangButton';
 import ThemeButton from './ThemeButton';
 import { useMenu } from './useMenu';
+import { enableNextAuth } from '@/const/auth';
+import { isDesktop } from '@/const/version';
 
 const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
   const router = useRouter();
@@ -41,7 +42,7 @@ const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
         <>
           <UserInfo avatarProps={{ clickable: false }} />
 
-          <Link href={'/profile/stats'} style={{ color: 'inherit' }}>
+          <Link style={{ color: 'inherit' }} to={'/profile/stats'}>
             <DataStatistics />
           </Link>
         </>

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

@@ -15,9 +15,9 @@ import {
   Mail,
   Settings2,
 } from 'lucide-react';
-import Link from 'next/link';
 import { PropsWithChildren, memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
 
 import type { MenuProps } from '@/components/Menu';
@@ -77,7 +77,7 @@ export const useMenu = () => {
     {
       icon: <Icon icon={CircleUserRound} />,
       key: 'profile',
-      label: <Link href={'/profile'}>{t('userPanel.profile')}</Link>,
+      label: <Link to="/profile">{t('userPanel.profile')}</Link>,
     },
   ];
 
@@ -91,7 +91,7 @@ export const useMenu = () => {
       icon: <Icon icon={Settings2} />,
       key: 'setting',
       label: (
-        <Link href={'/settings'}>
+        <Link to="/settings">
           <NewVersionBadge showBadge={hasNewVersion}>{t('userPanel.setting')}</NewVersionBadge>
         </Link>
       ),
@@ -135,15 +135,21 @@ export const useMenu = () => {
       icon: <Icon icon={Cloudy} />,
       key: 'cloud',
       label: (
-        <Link href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}`} target={'_blank'}>
+        <a href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}`} rel="noopener noreferrer" target="_blank">
           {t('userPanel.cloud', { name: LOBE_CHAT_CLOUD })}
-        </Link>
+        </a>
       ),
     },
     {
       icon: <Icon icon={FileClockIcon} />,
       key: 'changelog',
-      label: <Link href={isDesktop ? CHANGELOG : '/changelog/modal'}>{t('changelog')}</Link>,
+      label: isDesktop ? (
+        <a href={CHANGELOG} rel="noopener noreferrer" target="_blank">
+          {t('changelog')}
+        </a>
+      ) : (
+        <Link to="/changelog/modal">{t('changelog')}</Link>
+      ),
     },
     {
       children: [
@@ -151,36 +157,36 @@ export const useMenu = () => {
           icon: <Icon icon={Book} />,
           key: 'docs',
           label: (
-            <Link href={DOCUMENTS_REFER_URL} target={'_blank'}>
+            <a href={DOCUMENTS_REFER_URL} rel="noopener noreferrer" target="_blank">
               {t('userPanel.docs')}
-            </Link>
+            </a>
           ),
         },
         {
           icon: <Icon icon={Feather} />,
           key: 'feedback',
           label: (
-            <Link href={GITHUB_ISSUES} target={'_blank'}>
+            <a href={GITHUB_ISSUES} rel="noopener noreferrer" target="_blank">
               {t('userPanel.feedback')}
-            </Link>
+            </a>
           ),
         },
         {
           icon: <Icon icon={DiscordIcon} />,
           key: 'discord',
           label: (
-            <Link href={SOCIAL_URL.discord} target={'_blank'}>
+            <a href={SOCIAL_URL.discord} rel="noopener noreferrer" target="_blank">
               {t('userPanel.discord')}
-            </Link>
+            </a>
           ),
         },
         {
           icon: <Icon icon={Mail} />,
           key: 'email',
           label: (
-            <Link href={mailTo(BRANDING_EMAIL.support)} target={'_blank'}>
+            <a href={mailTo(BRANDING_EMAIL.support)} rel="noopener noreferrer" target="_blank">
               {t('userPanel.email')}
-            </Link>
+            </a>
           ),
         },
       ],

package/src/features/User/__tests__/PanelContent.test.tsx

@@ -1,4 +1,5 @@
 import { act, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { useUserStore } from '@/store/user';
@@ -79,13 +80,18 @@ vi.mock('@/const/auth', () => ({
 describe('PanelContent', () => {
   const closePopover = vi.fn();
 
+  // Helper function to render component with Router provider
+  const renderWithRouter = (ui: React.ReactElement) => {
+    return render(<MemoryRouter>{ui}</MemoryRouter>);
+  };
+
   describe('enable auth', () => {
     it('should render UserInfo when user is signed in', () => {
       act(() => {
         useUserStore.setState({ isSignedIn: true });
       });
 
-      render(<PanelContent closePopover={closePopover} />);
+      renderWithRouter(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
       expect(screen.getByText('Mocked DataStatistics')).toBeInTheDocument();
@@ -97,7 +103,7 @@ describe('PanelContent', () => {
         useUserStore.setState({ isSignedIn: false });
       });
 
-      render(<PanelContent closePopover={closePopover} />);
+      renderWithRouter(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked SignInBlock')).toBeInTheDocument();
       expect(screen.queryByText('Mocked DataStatistics')).not.toBeInTheDocument();
@@ -109,7 +115,7 @@ describe('PanelContent', () => {
         useUserStore.setState({ isSignedIn: true });
       });
 
-      render(<PanelContent closePopover={closePopover} />);
+      renderWithRouter(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getAllByText('Mocked Menu').length).toBe(2);
     });
@@ -119,7 +125,7 @@ describe('PanelContent', () => {
         useUserStore.setState({ isSignedIn: false });
       });
 
-      render(<PanelContent closePopover={closePopover} />);
+      renderWithRouter(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked BrandWatermark')).toBeInTheDocument();
     });
@@ -131,7 +137,7 @@ describe('PanelContent', () => {
         useUserStore.setState({ isSignedIn: true });
       });
 
-      render(<PanelContent closePopover={closePopover} />);
+      renderWithRouter(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
       expect(screen.getByText('Mocked DataStatistics')).toBeInTheDocument();
@@ -145,14 +151,14 @@ describe('PanelContent', () => {
         useUserStore.setState({ isSignedIn: false });
       });
 
-      render(<PanelContent closePopover={closePopover} />);
+      renderWithRouter(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked BrandWatermark')).toBeInTheDocument();
     });
   });
 
   it('should render Menu with main items', () => {
-    render(<PanelContent closePopover={closePopover} />);
+    renderWithRouter(<PanelContent closePopover={closePopover} />);
 
     expect(screen.getByText('Mocked Menu')).toBeInTheDocument();
   });

package/src/hooks/useDiscoverTab.ts

@@ -1,7 +1,7 @@
-import { useQueryState } from 'nuqs';
-
 import { DiscoverTab } from '@/types/discover';
 
+import { useQueryState } from './useQueryParam';
+
 export const useDiscoverTab = () => {
   const [type] = useQueryState('type', {
     clearOnDefault: true,

package/src/hooks/useInterceptingRoutes.test.ts

@@ -1,35 +1,20 @@
 import { act, renderHook } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
-import { ChatSettingsTabs } from '@/store/global/initialState';
+import { ChatSettingsTabs, SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 import { useOpenChatSettings } from './useInterceptingRoutes';
 
-// Mocks
-const mockPush = vi.fn((href) => href);
-vi.mock('next/navigation', () => ({
-  useRouter: vi.fn(() => ({
-    push: mockPush,
-    replace: vi.fn((href) => href),
-  })),
-}));
-vi.mock('nextjs-toploader/app', () => ({
-  useRouter: vi.fn(() => ({
-    push: mockPush,
-    replace: vi.fn((href) => href),
-  })),
-}));
-vi.mock('@/hooks/useQuery', () => ({
-  useQuery: vi.fn(() => ({})),
-}));
-vi.mock('@/hooks/useQueryRoute', () => ({
-  useQueryRoute: vi.fn(() => ({
-    push: mockPush,
-  })),
+const mockNavigate = vi.fn();
+const mockUseNavigate = vi.fn(() => mockNavigate);
+const mockUseLocation = vi.fn(() => ({ pathname: '/' }));
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => mockUseNavigate(),
+  useLocation: () => mockUseLocation(),
 }));
 vi.mock('@/hooks/useIsMobile', () => ({
   useIsMobile: vi.fn(),
@@ -43,15 +28,26 @@ vi.mock('@/store/global', () => ({
   },
 }));
 describe('useOpenChatSettings', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useAgentStore.setState({ showAgentSetting: false });
+  });
 
-  it('should handle mobile route for chat settings', () => {
+  it('navigates to mobile chat settings with session info', () => {
     vi.mocked(useSessionStore).mockReturnValue('123');
     vi.mocked(useIsMobile).mockReturnValue(true);
     const { result } = renderHook(() => useOpenChatSettings(ChatSettingsTabs.Meta));
-    expect(result.current()).toBe('/chat/settings');
+
+    act(() => {
+      result.current();
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith(
+      `/chat/settings?session=123&showMobileWorkspace=true`,
+    );
   });
 
-  it('should handle desktop route for chat settings with session and tab', () => {
+  it('opens desktop agent settings overlay when not on mobile', () => {
     vi.mocked(useSessionStore).mockReturnValue('456');
     vi.mocked(useIsMobile).mockReturnValue(false);
 
@@ -62,5 +58,6 @@ describe('useOpenChatSettings', () => {
     });
 
     expect(useAgentStore.getState().showAgentSetting).toBeTruthy();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 });

package/src/hooks/useInterceptingRoutes.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { useIsMobile } from '@/hooks/useIsMobile';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useAgentStore } from '@/store/agent';
 import { ChatSettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
@@ -10,13 +10,14 @@ export const useOpenChatSettings = (tab: ChatSettingsTabs = ChatSettingsTabs.Met
   const activeId = useSessionStore((s) => s.activeId);
 
   const isMobile = useIsMobile();
-  const router = useQueryRoute();
+  const navigate = useNavigate();
+  const location = useLocation();
 
   return useMemo(() => {
-    if (isMobile) return () => router.push('/chat/settings', { query: { session: activeId } });
+    if (isMobile) return () => navigate(`/chat/settings?session=${activeId}&showMobileWorkspace=true`);
 
     return () => {
       useAgentStore.setState({ showAgentSetting: true });
     };
-  }, [activeId, router, tab, isMobile]);
+  }, [activeId, navigate, location.pathname, tab, isMobile]);
 };

package/src/hooks/usePinnedAgentState.ts

@@ -1,11 +1,11 @@
-import { parseAsBoolean, useQueryState } from 'nuqs';
 import { useMemo } from 'react';
 
+import { parseAsBoolean, useQueryParam } from './useQueryParam';
+
 export const usePinnedAgentState = () => {
-  const [isPinned, setIsPinned] = useQueryState(
-    'pinned',
-    parseAsBoolean.withDefault(false).withOptions({ clearOnDefault: true }),
-  );
+  const [isPinned, setIsPinned] = useQueryParam('pinned', parseAsBoolean.withDefault(false), {
+    clearOnDefault: true,
+  });
 
   const actions = useMemo(
     () => ({
@@ -14,7 +14,7 @@ export const usePinnedAgentState = () => {
       togglePinAgent: () => setIsPinned((prev) => !prev),
       unpinAgent: () => setIsPinned(false),
     }),
-    [],
+    [setIsPinned],
   );
 
   return [isPinned, actions] as const;

package/src/hooks/useQuery.ts

@@ -2,6 +2,11 @@ import { useSearchParams } from 'next/navigation';
 import qs from 'query-string';
 import { useMemo } from 'react';
 
+/**
+ * Hook to get query parameters
+ * This is the Next.js version
+ * For React Router version, use useQuery from @/app/[variants]/(main)/hooks/useQuery
+ */
 export const useQuery = () => {
   const rawQuery = useSearchParams();
   return useMemo(() => qs.parse(rawQuery.toString()), [rawQuery]);