@lobehub/lobehub 2.0.0-next.294 → 2.0.0-next.295

package/src/features/ResourceManager/components/Explorer/ToolBar/BatchActionsDropdown.tsx

@@ -29,168 +29,166 @@ interface BatchActionsDropdownProps {
   selectCount: number;
 }
 
-const BatchActionsDropdown = memo<BatchActionsDropdownProps>(
-  ({ selectCount, onActionClick }) => {
-    const { t } = useTranslation(['components', 'common', 'file', 'knowledgeBase']);
-    const { modal, message } = App.useApp();
-
-    const [libraryId, selectedFileIds] = useResourceManagerStore((s) => [
-      s.libraryId,
-      s.selectedFileIds,
-    ]);
-    const [useFetchKnowledgeBaseList, addFilesToKnowledgeBase] = useKnowledgeBaseStore((s) => [
-      s.useFetchKnowledgeBaseList,
-      s.addFilesToKnowledgeBase,
-    ]);
-    const { data: knowledgeBases } = useFetchKnowledgeBaseList();
-
-    const menuItems = useMemo<DropdownItem[]>(() => {
-      const items: DropdownItem[] = [];
-
-      // Show delete library option only when in a knowledge base and no files selected
-      if (libraryId && selectCount === 0) {
-        items.push({
-          danger: true,
-          icon: <Icon icon={Trash2Icon} />,
-          key: 'deleteLibrary',
-          label: t('header.actions.deleteLibrary', { ns: 'file' }),
-          onClick: async () => {
-            modal.confirm({
-              okButtonProps: {
-                danger: true,
-              },
-              onOk: async () => {
-                await onActionClick('deleteLibrary');
-              },
-              title: t('library.list.confirmRemoveLibrary', { ns: 'file' }),
-            });
-          },
-        });
-        return items;
-      }
-
-      // Filter out current knowledge base and create submenu items
-      const availableKnowledgeBases = (knowledgeBases || []).filter((kb) => kb.id !== libraryId);
-
-      const addToKnowledgeBaseSubmenu: DropdownItem[] = availableKnowledgeBases.map((kb) => ({
-        disabled: selectCount === 0,
-        icon: <RepoIcon />,
-        key: `add-to-kb-${kb.id}`,
-        label: <span style={{ marginLeft: 8 }}>{kb.name}</span>,
+const BatchActionsDropdown = memo<BatchActionsDropdownProps>(({ selectCount, onActionClick }) => {
+  const { t } = useTranslation(['components', 'common', 'file', 'knowledgeBase']);
+  const { modal, message } = App.useApp();
+
+  const [libraryId, selectedFileIds] = useResourceManagerStore((s) => [
+    s.libraryId,
+    s.selectedFileIds,
+  ]);
+  const [useFetchKnowledgeBaseList, addFilesToKnowledgeBase] = useKnowledgeBaseStore((s) => [
+    s.useFetchKnowledgeBaseList,
+    s.addFilesToKnowledgeBase,
+  ]);
+  const { data: knowledgeBases } = useFetchKnowledgeBaseList();
+
+  const menuItems = useMemo<DropdownItem[]>(() => {
+    const items: DropdownItem[] = [];
+
+    // Show delete library option only when in a knowledge base and no files selected
+    if (libraryId && selectCount === 0) {
+      items.push({
+        danger: true,
+        icon: <Icon icon={Trash2Icon} />,
+        key: 'deleteLibrary',
+        label: t('header.actions.deleteLibrary', { ns: 'file' }),
         onClick: async () => {
-          try {
-            await addFilesToKnowledgeBase(kb.id, selectedFileIds);
-            message.success(
-              t('addToKnowledgeBase.addSuccess', {
-                count: selectCount,
-                ns: 'knowledgeBase',
-              }),
-            );
-          } catch (e) {
-            console.error(e);
-            message.error(t('addToKnowledgeBase.error', { ns: 'knowledgeBase' }));
-          }
+          modal.confirm({
+            okButtonProps: {
+              danger: true,
+            },
+            onOk: async () => {
+              await onActionClick('deleteLibrary');
+            },
+            title: t('library.list.confirmRemoveLibrary', { ns: 'file' }),
+          });
         },
-      }));
-
-      if (libraryId) {
-        items.push({
-          disabled: selectCount === 0,
-          icon: <Icon icon={BookMinusIcon} />,
-          key: 'removeFromKnowledgeBase',
-          label: t('FileManager.actions.removeFromKnowledgeBase'),
-          onClick: () => {
-            modal.confirm({
-              okButtonProps: {
-                danger: true,
-              },
-              onOk: async () => {
-                await onActionClick('removeFromKnowledgeBase');
-                message.success(t('FileManager.actions.removeFromKnowledgeBaseSuccess'));
-              },
-              title: t('FileManager.actions.confirmRemoveFromKnowledgeBase', {
-                count: selectCount,
-              }),
-            });
-          },
-        });
+      });
+      return items;
+    }
+
+    // Filter out current knowledge base and create submenu items
+    const availableKnowledgeBases = (knowledgeBases || []).filter((kb) => kb.id !== libraryId);
+
+    const addToKnowledgeBaseSubmenu: DropdownItem[] = availableKnowledgeBases.map((kb) => ({
+      disabled: selectCount === 0,
+      icon: <RepoIcon />,
+      key: `add-to-kb-${kb.id}`,
+      label: <span style={{ marginLeft: 8 }}>{kb.name}</span>,
+      onClick: async () => {
+        try {
+          await addFilesToKnowledgeBase(kb.id, selectedFileIds);
+          message.success(
+            t('addToKnowledgeBase.addSuccess', {
+              count: selectCount,
+              ns: 'knowledgeBase',
+            }),
+          );
+        } catch (e) {
+          console.error(e);
+          message.error(t('addToKnowledgeBase.error', { ns: 'knowledgeBase' }));
+        }
+      },
+    }));
 
-        if (availableKnowledgeBases.length > 0) {
-          items.push({
-            children: addToKnowledgeBaseSubmenu as any,
-            disabled: selectCount === 0,
-            icon: <Icon icon={BookPlusIcon} />,
-            key: 'addToOtherKnowledgeBase',
-            label: t('FileManager.actions.addToOtherKnowledgeBase'),
+    if (libraryId) {
+      items.push({
+        disabled: selectCount === 0,
+        icon: <Icon icon={BookMinusIcon} />,
+        key: 'removeFromKnowledgeBase',
+        label: t('FileManager.actions.removeFromKnowledgeBase'),
+        onClick: () => {
+          modal.confirm({
+            okButtonProps: {
+              danger: true,
+            },
+            onOk: async () => {
+              await onActionClick('removeFromKnowledgeBase');
+              message.success(t('FileManager.actions.removeFromKnowledgeBaseSuccess'));
+            },
+            title: t('FileManager.actions.confirmRemoveFromKnowledgeBase', {
+              count: selectCount,
+            }),
           });
-        }
-      } else if (availableKnowledgeBases.length > 0) {
+        },
+      });
+
+      if (availableKnowledgeBases.length > 0) {
         items.push({
           children: addToKnowledgeBaseSubmenu as any,
           disabled: selectCount === 0,
           icon: <Icon icon={BookPlusIcon} />,
-          key: 'addToKnowledgeBase',
-          label: t('FileManager.actions.addToKnowledgeBase'),
+          key: 'addToOtherKnowledgeBase',
+          label: t('FileManager.actions.addToOtherKnowledgeBase'),
         });
       }
-
-      items.push(
-        {
-          disabled: selectCount === 0,
-          icon: <Icon icon={FileBoxIcon} />,
-          key: 'batchChunking',
-          label: t('FileManager.actions.batchChunking'),
-          onClick: async () => {
-            await onActionClick('batchChunking');
-          },
-        },
-        {
-          type: 'divider',
+    } else if (availableKnowledgeBases.length > 0) {
+      items.push({
+        children: addToKnowledgeBaseSubmenu as any,
+        disabled: selectCount === 0,
+        icon: <Icon icon={BookPlusIcon} />,
+        key: 'addToKnowledgeBase',
+        label: t('FileManager.actions.addToKnowledgeBase'),
+      });
+    }
+
+    items.push(
+      {
+        disabled: selectCount === 0,
+        icon: <Icon icon={FileBoxIcon} />,
+        key: 'batchChunking',
+        label: t('FileManager.actions.batchChunking'),
+        onClick: async () => {
+          await onActionClick('batchChunking');
         },
-        {
-          danger: true,
-          disabled: selectCount === 0,
-          icon: <Icon icon={Trash2Icon} />,
-          key: 'delete',
-          label: t('delete', { ns: 'common' }),
-          onClick: async () => {
-            modal.confirm({
-              okButtonProps: {
-                danger: true,
-              },
-              onOk: async () => {
-                await onActionClick('delete');
-                message.success(t('FileManager.actions.deleteSuccess'));
-              },
-              title: t('FileManager.actions.confirmDeleteMultiFiles', { count: selectCount }),
-            });
-          },
+      },
+      {
+        type: 'divider',
+      },
+      {
+        danger: true,
+        disabled: selectCount === 0,
+        icon: <Icon icon={Trash2Icon} />,
+        key: 'delete',
+        label: t('delete', { ns: 'common' }),
+        onClick: async () => {
+          modal.confirm({
+            okButtonProps: {
+              danger: true,
+            },
+            onOk: async () => {
+              await onActionClick('delete');
+              message.success(t('FileManager.actions.deleteSuccess'));
+            },
+            title: t('FileManager.actions.confirmDeleteMultiFiles', { count: selectCount }),
+          });
         },
-      );
-
-      return items;
-    }, [
-      libraryId,
-      selectCount,
-      selectedFileIds,
-      onActionClick,
-      addFilesToKnowledgeBase,
-      t,
-      modal,
-      message,
-      knowledgeBases,
-    ]);
-
-    return (
-      <DropdownMenu items={menuItems} placement="bottomLeft">
-        <ActionIconWithChevron
-          icon={CircleEllipsisIcon}
-          title={t('FileManager.actions.batchActions', 'Batch actions')}
-        />
-      </DropdownMenu>
+      },
     );
-  },
-);
+
+    return items;
+  }, [
+    libraryId,
+    selectCount,
+    selectedFileIds,
+    onActionClick,
+    addFilesToKnowledgeBase,
+    t,
+    modal,
+    message,
+    knowledgeBases,
+  ]);
+
+  return (
+    <DropdownMenu items={menuItems} placement="bottomLeft">
+      <ActionIconWithChevron
+        icon={CircleEllipsisIcon}
+        title={t('FileManager.actions.batchActions', 'Batch actions')}
+      />
+    </DropdownMenu>
+  );
+});
 
 BatchActionsDropdown.displayName = 'BatchActionsDropdown';
 

package/src/features/ResourceManager/index.tsx

@@ -3,12 +3,12 @@
 import { BRANDING_NAME } from '@lobechat/business-const';
 import { Flexbox } from '@lobehub/ui';
 import { createStyles, cssVar } from 'antd-style';
-import dynamic from 'next/dynamic';
 import { memo, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
 import { PageEditor } from '@/features/PageEditor';
+import dynamic from '@/libs/next/dynamic';
 import { documentService } from '@/services/document';
 import { useFileStore } from '@/store/file';
 import { documentSelectors } from '@/store/file/slices/document/selectors';

package/src/features/Setting/Footer.tsx

@@ -4,7 +4,6 @@ import { BRANDING_NAME } from '@lobechat/business-const';
 import { Center, Flexbox, Icon } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
 import { MessageSquareHeart } from 'lucide-react';
-import Link from 'next/link';
 import { type PropsWithChildren, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -43,7 +42,7 @@ const Footer = memo<PropsWithChildren>(() => {
         >
           <div style={{ textAlign: 'center' }}>
             <Icon icon={MessageSquareHeart} /> {`${t('footer.title')} `}
-            <Link
+            <a
               aria-label={'star'}
               href={GITHUB}
               onClick={(e) => {
@@ -52,9 +51,9 @@ const Footer = memo<PropsWithChildren>(() => {
               }}
             >
               {t('footer.action.star')}
-            </Link>
+            </a>
             {` ${t('footer.and')} `}
-            <Link
+            <a
               aria-label={'feedback'}
               href={GITHUB_ISSUES}
               onClick={(e) => {
@@ -63,7 +62,7 @@ const Footer = memo<PropsWithChildren>(() => {
               }}
             >
               {t('footer.action.feedback')}
-            </Link>
+            </a>
             {' !'}
           </div>
         </Center>

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

@@ -1,6 +1,6 @@
 import { ENABLE_BUSINESS_FEATURES } from '@lobechat/business-const';
 import { Flexbox } from '@lobehub/ui';
-import { useRouter } from 'next/navigation';
+import { useRouter } from '@/libs/next/navigation';
 import { memo } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 

package/src/hooks/useActiveTabKey.ts

@@ -1,9 +1,10 @@
-import { usePathname, useSearchParams } from 'next/navigation';
+import { usePathname , useSearchParams } from '@/libs/router/navigation';
 
 import { ProfileTabs, SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
 /**
  * Returns the active tab key (chat/market/settings/...)
+ * React Router version for SPA
  */
 export const useActiveTabKey = () => {
   const pathname = usePathname();
@@ -12,16 +13,18 @@ export const useActiveTabKey = () => {
 
 /**
  * Returns the active setting page key (?active=common/sync/agent/...)
+ * React Router version for SPA
  */
 export const useActiveSettingsKey = () => {
-  const search = useSearchParams();
-  const tabs = search.get('active');
+  const [searchParams] = useSearchParams();
+  const tabs = searchParams.get('active');
   if (!tabs) return SettingsTabs.Common;
   return tabs as SettingsTabs;
 };
 
 /**
  * Returns the active profile page key (profile/security/stats/...)
+ * React Router version for SPA
  */
 export const useActiveProfileKey = () => {
   const pathname = usePathname();

package/src/hooks/useIsSingleMode.test.ts

@@ -1,23 +1,18 @@
 import { renderHook } from '@testing-library/react';
-import { ReadonlyURLSearchParams } from 'next/navigation';
 import { describe, expect, it, vi } from 'vitest';
 
 import { useIsSingleMode } from './useIsSingleMode';
 
-// Mock next/navigation
+// Mock react-router-dom useSearchParams (via the wrapper hook)
 const mockUseSearchParams = vi.hoisted(() => vi.fn());
-vi.mock('next/navigation', () => ({
+vi.mock('@/libs/router/navigation', () => ({
   useSearchParams: mockUseSearchParams,
 }));
 
 describe('useIsSingleMode', () => {
-
   it('should return false initially (during SSR)', () => {
-    const mockSearchParams = {
-      get: vi.fn(() => 'single'),
-    } as unknown as ReadonlyURLSearchParams;
-
-    mockUseSearchParams.mockReturnValue(mockSearchParams);
+    const mockSearchParams = new URLSearchParams('mode=single');
+    mockUseSearchParams.mockReturnValue([mockSearchParams, vi.fn()]);
 
     const { result } = renderHook(() => useIsSingleMode());
 
@@ -26,11 +21,8 @@ describe('useIsSingleMode', () => {
   });
 
   it('should return true when mode=single', () => {
-    const mockSearchParams = {
-      get: vi.fn((key: string) => (key === 'mode' ? 'single' : null)),
-    } as unknown as ReadonlyURLSearchParams;
-
-    mockUseSearchParams.mockReturnValue(mockSearchParams);
+    const mockSearchParams = new URLSearchParams('mode=single');
+    mockUseSearchParams.mockReturnValue([mockSearchParams, vi.fn()]);
 
     const { result } = renderHook(() => useIsSingleMode());
 
@@ -39,11 +31,8 @@ describe('useIsSingleMode', () => {
   });
 
   it('should return false when mode is not single', () => {
-    const mockSearchParams = {
-      get: vi.fn((key: string) => (key === 'mode' ? 'normal' : null)),
-    } as unknown as ReadonlyURLSearchParams;
-
-    mockUseSearchParams.mockReturnValue(mockSearchParams);
+    const mockSearchParams = new URLSearchParams('mode=normal');
+    mockUseSearchParams.mockReturnValue([mockSearchParams, vi.fn()]);
 
     const { result } = renderHook(() => useIsSingleMode());
 
@@ -52,11 +41,8 @@ describe('useIsSingleMode', () => {
   });
 
   it('should return false when no mode parameter exists', () => {
-    const mockSearchParams = {
-      get: vi.fn(() => null),
-    } as unknown as ReadonlyURLSearchParams;
-
-    mockUseSearchParams.mockReturnValue(mockSearchParams);
+    const mockSearchParams = new URLSearchParams();
+    mockUseSearchParams.mockReturnValue([mockSearchParams, vi.fn()]);
 
     const { result } = renderHook(() => useIsSingleMode());
 

package/src/hooks/useIsSingleMode.ts

@@ -1,11 +1,13 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
+import { useSearchParams } from '@/libs/router/navigation';
+
 /**
  * Hook to check if the current page is in single mode
  * Single mode is used for standalone windows in desktop app
+ * React Router version for SPA
  * @returns boolean indicating if the current page is in single mode
  */
 export const useIsSingleMode = (): boolean => {
@@ -16,7 +18,7 @@ export const useIsSingleMode = (): boolean => {
     setMounted(true);
   }, []);
 
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
 
   useEffect(() => {
     if (mounted) {

package/src/hooks/useIsSubSlug.ts

@@ -1,7 +1,8 @@
-import { usePathname } from 'next/navigation';
+import { usePathname } from '@/libs/router/navigation';
 
 /**
  * Returns true if the current path has a sub slug (`/chat/mobile` or `/chat/settings`)
+ * React Router version for SPA
  */
 export const useIsSubSlug = () => {
   const pathname = usePathname();

package/src/hooks/useQuery.ts

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

package/src/layout/GlobalProvider/AppTheme.tsx

@@ -13,15 +13,15 @@ import { createStaticStyles, cx, useTheme } from 'antd-style';
 import 'antd/dist/reset.css';
 import { AppConfigContext } from 'antd/es/app/context';
 import * as motion from 'motion/react-m';
-import Image from 'next/image';
-import Link from 'next/link';
 import { type ReactNode, memo, useEffect, useMemo, useState } from 'react';
 
 import AntdStaticMethods from '@/components/AntdStaticMethods';
+import Link from '@/components/Link';
 import { LOBE_THEME_NEUTRAL_COLOR, LOBE_THEME_PRIMARY_COLOR } from '@/const/theme';
 import { isDesktop } from '@/const/version';
 import { useIsDark } from '@/hooks/useIsDark';
 import { getUILocaleAndResources } from '@/libs/getUILocaleAndResources';
+import Image from '@/libs/next/Image';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 import { useUserStore } from '@/store/user';

package/src/layout/GlobalProvider/StyleRegistry.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { StyleProvider } from 'antd-style';
-import { useServerInsertedHTML } from 'next/navigation';
+import { useServerInsertedHTML } from '@/libs/next/navigation';
 import { type PropsWithChildren } from 'react';
 
 import { isDesktop } from '@/const/version';

package/src/layout/GlobalProvider/useUserStateRedirect.ts

@@ -1,7 +1,6 @@
 'use client';
 
 import { OFFICIAL_URL } from '@lobechat/const';
-import { usePathname } from 'next/navigation';
 import { useCallback } from 'react';
 
 import { getDesktopOnboardingCompleted } from '@/app/[variants]/(desktop)/desktop-onboarding/storage';
@@ -11,20 +10,12 @@ import { useUserStore } from '@/store/user';
 import { onboardingSelectors } from '@/store/user/selectors';
 import type { UserInitializationState } from '@/types/user';
 
-const redirectIfNotOn = (currentPath: string | null | undefined, path: string) => {
-  if (!currentPath?.startsWith(path)) {
+const redirectIfNotOn = (currentPath: string, path: string) => {
+  if (!currentPath.startsWith(path)) {
     window.location.href = path;
   }
 };
 
-const useCurrentPathname = () => {
-  const pathname = usePathname();
-  return useCallback(() => {
-    if (typeof window === 'undefined') return pathname;
-    return window.location.pathname || pathname;
-  }, [pathname]);
-};
-
 export const useDesktopUserStateRedirect = () => {
   const dataSyncConfig = useElectronStore((s) => s.dataSyncConfig);
   const logout = useUserStore((s) => s.logout);
@@ -69,25 +60,22 @@ export const useDesktopUserStateRedirect = () => {
   );
 };
 
-export const useWebUserStateRedirect = (getCurrentPathname: () => string | null | undefined) =>
-  useCallback(
-    (state: UserInitializationState) => {
-      if (state.isInWaitList === true) {
-        redirectIfNotOn(getCurrentPathname(), '/waitlist');
-        return;
-      }
+export const useWebUserStateRedirect = () =>
+  useCallback((state: UserInitializationState) => {
+    const pathname = window.location.pathname;
+    if (state.isInWaitList === true) {
+      redirectIfNotOn(pathname, '/waitlist');
+      return;
+    }
 
-      if (!onboardingSelectors.needsOnboarding(state)) return;
+    if (!onboardingSelectors.needsOnboarding(state)) return;
 
-      redirectIfNotOn(getCurrentPathname(), '/onboarding');
-    },
-    [getCurrentPathname],
-  );
+    redirectIfNotOn(pathname, '/onboarding');
+  }, []);
 
 export const useUserStateRedirect = () => {
-  const getCurrentPathname = useCurrentPathname();
   const desktopRedirect = useDesktopUserStateRedirect();
-  const webRedirect = useWebUserStateRedirect(getCurrentPathname);
+  const webRedirect = useWebUserStateRedirect();
 
   return useCallback(
     (state: UserInitializationState) => {

package/src/libs/next/Image.tsx

@@ -0,0 +1,13 @@
+/**
+ * Image component wrapper for Next.js Image.
+ * This module provides a unified interface that can be easily replaced
+ * with a generic <img> or custom image component in the future.
+ *
+ * @see Phase 3.4: LOBE-2991
+ */
+
+// Re-export the Image component
+
+// Re-export types
+export type { ImageProps, StaticImageData } from 'next/image';
+export { default } from 'next/image';

package/src/libs/next/Link.tsx

@@ -0,0 +1,13 @@
+/**
+ * Link component wrapper for Next.js Link.
+ * This module provides a unified interface that can be easily replaced
+ * with react-router-dom Link in the future.
+ *
+ * @see Phase 3.2: LOBE-2989
+ */
+
+// Re-export the Link component
+
+// Re-export the type for props
+export type { LinkProps } from 'next/link';
+export { default } from 'next/link';