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

package/src/features/ResourceManager/components/Explorer/ListView/Skeleton.tsx

@@ -34,33 +34,33 @@ const ListViewSkeleton = ({
             opacity: getOpacity(index),
           }}
         >
-        <Center height={40} style={{ paddingInline: 4 }}>
-          <Checkbox disabled />
-        </Center>
-        <Flexbox
-          align={'center'}
-          horizontal
-          style={{
-            flexShrink: 0,
-            maxWidth: columnWidths.name,
-            minWidth: columnWidths.name,
-            paddingInline: 8,
-            width: columnWidths.name,
-          }}
-        >
-          <Skeleton.Avatar active shape={'square'} size={24} style={{ marginInline: 8 }} />
-          <Skeleton.Button active style={{ height: 16, width: '60%' }} />
-        </Flexbox>
-        <Flexbox style={{ flexShrink: 0, paddingInline: '0 24px' }} width={columnWidths.date}>
-          <Skeleton.Button active style={{ height: 16, width: '80%' }} />
-        </Flexbox>
-        <Flexbox style={{ flexShrink: 0, paddingInline: '0 24px' }} width={columnWidths.size}>
-          <Skeleton.Button active style={{ height: 16, width: '60%' }} />
+          <Center height={40} style={{ paddingInline: 4 }}>
+            <Checkbox disabled />
+          </Center>
+          <Flexbox
+            align={'center'}
+            horizontal
+            style={{
+              flexShrink: 0,
+              maxWidth: columnWidths.name,
+              minWidth: columnWidths.name,
+              paddingInline: 8,
+              width: columnWidths.name,
+            }}
+          >
+            <Skeleton.Avatar active shape={'square'} size={24} style={{ marginInline: 8 }} />
+            <Skeleton.Button active style={{ height: 16, width: '60%' }} />
+          </Flexbox>
+          <Flexbox style={{ flexShrink: 0, paddingInline: '0 24px' }} width={columnWidths.date}>
+            <Skeleton.Button active style={{ height: 16, width: '80%' }} />
+          </Flexbox>
+          <Flexbox style={{ flexShrink: 0, paddingInline: '0 24px' }} width={columnWidths.size}>
+            <Skeleton.Button active style={{ height: 16, width: '60%' }} />
+          </Flexbox>
         </Flexbox>
-      </Flexbox>
-    ))}
-  </Flexbox>
-);
+      ))}
+    </Flexbox>
+  );
 };
 
 export default ListViewSkeleton;

package/src/features/ResourceManager/components/Explorer/ListView/index.tsx

@@ -34,7 +34,7 @@ const styles = createStaticStyles(({ css }) => ({
   `,
   dropZoneActive: css`
     background: ${cssVar.colorPrimaryBg};
-    outline: 2px dashed ${cssVar.colorPrimary};
+    outline: 1px dashed ${cssVar.colorPrimaryBorder};
     outline-offset: -4px;
   `,
   header: css`
@@ -330,9 +330,15 @@ const ListView = memo(function ListView() {
 
   // Memoize footer component to show skeleton loaders when loading more
   const Footer = useCallback(() => {
-    if (!isLoadingMore || !fileListHasMore) return null;
-    return <ListViewSkeleton columnWidths={columnWidths} />;
-  }, [isLoadingMore, fileListHasMore, columnWidths]);
+    if (isLoadingMore && fileListHasMore) return <ListViewSkeleton columnWidths={columnWidths} />;
+
+    // Leave some padding at the end when there are no more pages,
+    // so users can clearly feel they've reached the end of the list.
+    if (fileListHasMore === false && dataLength > 0)
+      return <div aria-hidden style={{ height: 96 }} />;
+
+    return null;
+  }, [columnWidths, dataLength, fileListHasMore, isLoadingMore]);
 
   if (showSkeleton) return <ListViewSkeleton columnWidths={columnWidths} />;
 
@@ -369,7 +375,12 @@ const ListView = memo(function ListView() {
               width: columnWidths.name,
             }}
           >
-            {t('FileManager.title.title')}
+            {selectFileIds.length > 0
+              ? t('FileManager.total.selectedCount', {
+                  count: selectFileIds.length,
+                  ns: 'components',
+                })
+              : t('FileManager.title.title')}
             <ColumnResizeHandle
               column="name"
               currentWidth={columnWidths.name}

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/components/LibraryHierarchy/styles.ts

@@ -6,11 +6,12 @@ export const styles = createStaticStyles(({ css, cssVar }) => ({
     opacity: 0.5;
   `,
   fileItemDragOver: css`
-    color: ${cssVar.colorBgElevated} !important;
-    background-color: ${cssVar.colorText} !important;
+    outline: 1px dashed ${cssVar.colorPrimaryBorder};
+    outline-offset: -2px;
 
-    * {
-      color: ${cssVar.colorBgElevated} !important;
+    &,
+    &:hover {
+      background: ${cssVar.colorPrimaryBg};
     }
   `,
   treeItem: css`

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,9 @@
-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 +12,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]);
 };