@lobehub/lobehub 2.0.0-next.249 → 2.0.0-next.250

package/src/app/[variants]/(main)/resource/library/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { memo, useEffect } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { memo, useEffect, useLayoutEffect } from 'react';
+import { useLocation, useParams, useSearchParams } from 'react-router-dom';
 
 import Container from '@/app/[variants]/(main)/resource/library/features/Container';
 import NProgress from '@/components/NProgress';
@@ -14,6 +14,7 @@ import { useResourceManagerStore } from '../features/store';
 const MainContent = memo(() => {
   const { id: knowledgeBaseId } = useParams<{ id: string }>();
   const [searchParams] = useSearchParams();
+  const location = useLocation();
   const [setMode, setCurrentViewItemId, setLibraryId] = useResourceManagerStore((s) => [
     s.setMode,
     s.setCurrentViewItemId,
@@ -30,10 +31,16 @@ const MainContent = memo(() => {
   // Load knowledge base data
   useKnowledgeBaseItem(knowledgeBaseId || '');
 
-  // Set libraryId from URL params (only when knowledgeBaseId changes)
-  useEffect(() => {
-    setLibraryId(knowledgeBaseId);
-  }, [knowledgeBaseId, setLibraryId]);
+  // Sync libraryId from URL params using useLayoutEffect
+  // useLayoutEffect runs synchronously before browser paint, ensuring state is set
+  // before Explorer component renders and computes query parameters
+  // IMPORTANT: Only depend on knowledgeBaseId and location.pathname, NOT currentLibraryId to avoid feedback loop
+  useLayoutEffect(() => {
+    const isOnLibraryRoute = location.pathname.includes('/library/');
+    if (isOnLibraryRoute) {
+      setLibraryId(knowledgeBaseId);
+    }
+  }, [knowledgeBaseId, setLibraryId, location.pathname]);
 
   // Sync file view mode from URL
   useEffect(() => {

package/src/features/LibraryModal/AddFilesToKnowledgeBase/SelectForm.tsx

@@ -5,7 +5,7 @@ import { memo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import RepoIcon from '@/components/LibIcon';
-import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
+import { useKnowledgeBaseStore } from '@/store/library';
 
 interface CreateFormProps {
   fileIds: string[];

package/src/features/LibraryModal/CreateNew/CreateForm.tsx

@@ -2,7 +2,7 @@ import { Button, Form, Input, TextArea } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
+import { useKnowledgeBaseStore } from '@/store/library';
 import { type CreateKnowledgeBaseParams } from '@/types/knowledgeBase';
 
 interface CreateFormProps {

package/src/features/PageEditor/Header/Breadcrumb.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useFileStore } from '@/store/file';
-import { knowledgeBaseSelectors, useKnowledgeBaseStore } from '@/store/knowledgeBase';
+import { knowledgeBaseSelectors, useKnowledgeBaseStore } from '@/store/library';
 
 import { usePageEditorStore } from '../store';
 

package/src/features/PageEditor/store/action.ts

@@ -181,7 +181,7 @@ export const store: (initState?: Partial<State>) => StateCreator<Store> =
             return;
           }
 
-          const { updateDocumentOptimistically, replaceTempDocumentWithReal, refreshFileList } =
+          const { updateDocumentOptimistically, replaceTempDocumentWithReal } =
             useFileStore.getState();
 
           if (currentDocId && !currentDocId.startsWith('temp-document-')) {
@@ -241,7 +241,10 @@ export const store: (initState?: Partial<State>) => StateCreator<Store> =
 
             set({ currentDocId: newPage.id });
             onDocumentIdChange?.(newPage.id);
-            refreshFileList();
+
+            // Refetch resource list to show newly created page
+            const { revalidateResources } = await import('@/store/file/slices/resource/hooks');
+            await revalidateResources();
           }
 
           if (hadFocus) {

package/src/features/PageExplorer/PageExplorerPlaceholder.tsx

@@ -82,7 +82,6 @@ const PageExplorerPlaceholder = memo<PageExplorerPlaceholderProps>(
       createOptimisticDocument,
       replaceTempDocumentWithReal,
       setSelectedPageId,
-      refreshFileList,
       fetchDocuments,
     ] = useFileStore((s) => [
       s.createNewPage,
@@ -90,7 +89,6 @@ const PageExplorerPlaceholder = memo<PageExplorerPlaceholderProps>(
       s.createOptimisticDocument,
       s.replaceTempDocumentWithReal,
       s.setSelectedPageId,
-      s.refreshFileList,
       s.fetchDocuments,
     ]);
 
@@ -98,7 +96,11 @@ const PageExplorerPlaceholder = memo<PageExplorerPlaceholderProps>(
       createDocument,
       currentFolderId: null,
       libraryId: knowledgeBaseId ?? null,
-      refreshFileList,
+      refetchResources: async () => {
+        const { revalidateResources } = await import('@/store/file/slices/resource/hooks');
+        await revalidateResources();
+        await fetchDocuments({ pageOnly: true });
+      },
       t,
     });
 
@@ -107,10 +109,6 @@ const PageExplorerPlaceholder = memo<PageExplorerPlaceholderProps>(
       event: React.ChangeEvent<HTMLInputElement>,
     ) => {
       await notionImport.handleNotionImport(event);
-      // Fetch documents to update the UI immediately
-      // The hook calls refreshFileList which invalidates SWR cache,
-      // but we need to explicitly fetch to update the zustand store
-      await fetchDocuments({ pageOnly: true });
     };
 
     const handleCreateDocument = async (content: string, title: string) => {

package/src/features/ResourceManager/components/Explorer/Header/Breadcrumb.tsx

@@ -7,7 +7,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useFolderPath } from '@/app/[variants]/(main)/resource/features/hooks/useFolderPath';
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
 import { useFileStore } from '@/store/file';
-import { knowledgeBaseSelectors, useKnowledgeBaseStore } from '@/store/knowledgeBase';
+import { knowledgeBaseSelectors, useKnowledgeBaseStore } from '@/store/library';
 import { FilesTabs } from '@/types/files';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({

package/src/features/ResourceManager/components/Explorer/ItemDropdown/useFileItemDropdown.tsx

@@ -12,11 +12,14 @@ import {
 } from 'lucide-react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
 
 import RepoIcon from '@/components/LibIcon';
+import { clearTreeFolderCache } from '@/features/ResourceManager/components/Tree';
+import { PAGE_FILE_TYPE } from '@/features/ResourceManager/constants';
 import { documentService } from '@/services/document';
 import { useFileStore } from '@/store/file';
-import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
+import { useKnowledgeBaseStore } from '@/store/library';
 import { downloadFile } from '@/utils/client/downloadFile';
 
 import MoveToFolderModal from '../MoveToFolderModal';
@@ -26,7 +29,7 @@ interface UseFileItemDropdownParams {
   fileType: string;
   filename: string;
   id: string;
-  knowledgeBaseId?: string;
+  libraryId?: string;
   onRenameStart?: () => void;
   sourceType?: string;
   url: string;
@@ -36,9 +39,12 @@ interface UseFileItemDropdownReturn {
   menuItems: () => ItemType[];
 }
 
+/**
+ * Shared with folder tree and explorer
+ */
 export const useFileItemDropdown = ({
   id,
-  knowledgeBaseId,
+  libraryId,
   url,
   filename,
   fileType,
@@ -48,7 +54,13 @@ export const useFileItemDropdown = ({
   const { t } = useTranslation(['components', 'common', 'knowledgeBase']);
   const { message, modal } = App.useApp();
 
-  const [removeFile, refreshFileList] = useFileStore((s) => [s.removeFileItem, s.refreshFileList]);
+  const { deleteResource, refreshFileList } = useFileStore(
+    (s) => ({
+      deleteResource: s.deleteResource,
+      refreshFileList: s.refreshFileList,
+    }),
+    shallow,
+  );
   const [removeFilesFromKnowledgeBase, addFilesToKnowledgeBase, useFetchKnowledgeBaseList] =
     useKnowledgeBaseStore((s) => [
       s.removeFilesFromKnowledgeBase,
@@ -59,17 +71,15 @@ export const useFileItemDropdown = ({
   // Fetch knowledge bases - SWR caches this across all dropdown instances
   // Only the first call fetches from server, subsequent calls use cache
   // The expensive menu computation is deferred until dropdown opens (menuItems is a function)
-  const { data: knowledgeBases } = useFetchKnowledgeBaseList();
+  const { data: libraries } = useFetchKnowledgeBaseList();
 
-  const inKnowledgeBase = !!knowledgeBaseId;
+  const isInLibrary = !!libraryId;
   const isFolder = fileType === 'custom/folder';
-  const isPage = sourceType === 'document' || fileType === 'custom/document';
+  const isPage = sourceType === 'document' || fileType === PAGE_FILE_TYPE;
 
   const menuItems = useCallback(() => {
     // Filter out current knowledge base and create submenu items
-    const availableKnowledgeBases = (knowledgeBases || []).filter(
-      (kb) => kb.id !== knowledgeBaseId,
-    );
+    const availableKnowledgeBases = (libraries || []).filter((kb) => kb.id !== libraryId);
 
     const addToKnowledgeBaseSubmenu: ItemType[] = availableKnowledgeBases.map((kb) => ({
       icon: <RepoIcon />,
@@ -92,8 +102,8 @@ export const useFileItemDropdown = ({
       },
     }));
 
-    const knowledgeBaseActions = (
-      inKnowledgeBase
+    const libraryRelatedActions = (
+      isInLibrary
         ? [
             availableKnowledgeBases.length > 0 && {
               children: addToKnowledgeBaseSubmenu,
@@ -113,7 +123,7 @@ export const useFileItemDropdown = ({
                     danger: true,
                   },
                   onOk: async () => {
-                    await removeFilesFromKnowledgeBase(knowledgeBaseId, [id]);
+                    await removeFilesFromKnowledgeBase(libraryId, [id]);
 
                     message.success(t('FileManager.actions.removeFromKnowledgeBaseSuccess'));
                   },
@@ -134,15 +144,15 @@ export const useFileItemDropdown = ({
           ]
     ) as ItemType[];
 
-    const hasKnowledgeBaseActions = knowledgeBaseActions.some(Boolean);
+    const hasKnowledgeBaseActions = libraryRelatedActions.some(Boolean);
 
     return (
       [
-        ...knowledgeBaseActions,
+        ...libraryRelatedActions,
         hasKnowledgeBaseActions && {
           type: 'divider',
         },
-        inKnowledgeBase && {
+        isInLibrary && {
           icon: <Icon icon={FolderInputIcon} />,
           key: 'moveToFolder',
           label: t('FileManager.actions.moveToFolder'),
@@ -151,8 +161,7 @@ export const useFileItemDropdown = ({
 
             createRawModal(MoveToFolderModal, {
               fileId: id,
-              fileType,
-              knowledgeBaseId,
+              knowledgeBaseId: libraryId,
             });
           },
         },
@@ -176,8 +185,8 @@ export const useFileItemDropdown = ({
             let urlToCopy = url;
             if (isPage) {
               const baseUrl = window.location.origin;
-              if (knowledgeBaseId) {
-                urlToCopy = `${baseUrl}/resource/library/${knowledgeBaseId}?file=${id}`;
+              if (libraryId) {
+                urlToCopy = `${baseUrl}/resource/library/${libraryId}?file=${id}`;
               } else {
                 urlToCopy = `${baseUrl}/resource?file=${id}`;
               }
@@ -249,19 +258,41 @@ export const useFileItemDropdown = ({
                 : t('FileManager.actions.confirmDelete'),
               okButtonProps: { danger: true },
               onOk: async () => {
-                if (isFolder || isPage) {
-                  await documentService.deleteDocument(id);
-                  await refreshFileList();
-                } else {
-                  await removeFile(id);
+                // Use optimistic delete - instant UI update, sync in background
+                await deleteResource(id);
+
+                // Ensure tree caches stay in sync with explorer
+                if (libraryId) {
+                  await clearTreeFolderCache(libraryId);
                 }
+                await refreshFileList();
+
+                message.success(t('FileManager.actions.deleteSuccess'));
               },
             });
           },
         },
       ] as ItemType[]
     ).filter(Boolean);
-  }, [inKnowledgeBase, isFolder, knowledgeBases, knowledgeBaseId, id]);
+  }, [
+    addFilesToKnowledgeBase,
+    clearTreeFolderCache,
+    deleteResource,
+    filename,
+    id,
+    isFolder,
+    isInLibrary,
+    isPage,
+    libraries,
+    libraryId,
+    message,
+    modal,
+    onRenameStart,
+    refreshFileList,
+    removeFilesFromKnowledgeBase,
+    t,
+    url,
+  ]);
 
   return { menuItems };
 };

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

@@ -17,6 +17,8 @@ import {
 } from '@/app/[variants]/(main)/resource/features/DndContextWrapper';
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
 import FileIcon from '@/components/FileIcon';
+import { clearTreeFolderCache } from '@/features/ResourceManager/components/Tree';
+import { PAGE_FILE_TYPE } from '@/features/ResourceManager/constants';
 import { fileManagerSelectors, useFileStore } from '@/store/file';
 import { type FileListItem as FileListItemType } from '@/types/files';
 import { formatSize } from '@/utils/format';
@@ -142,7 +144,8 @@ const FileListItem = memo<FileListItemProps>(
       (s) => ({
         isCreatingFileParseTask: fileManagerSelectors.isCreatingFileParseTask(id)(s),
         parseFiles: s.parseFilesToChunks,
-        renameFolder: s.renameFolder,
+        refreshFileList: s.refreshFileList,
+        updateResource: s.updateResource,
       }),
       shallow,
     );
@@ -161,6 +164,7 @@ const FileListItem = memo<FileListItemProps>(
     const [isRenaming, setIsRenaming] = useState(false);
     const [renamingValue, setRenamingValue] = useState(name);
     const inputRef = useRef<any>(null);
+    const isConfirmingRef = useRef(false);
     const isDragActive = useDragActive();
     const { setCurrentDrag } = useDragState();
     const [isDragging, setIsDragging] = useState(false);
@@ -170,10 +174,10 @@ const FileListItem = memo<FileListItemProps>(
     const computedValues = useMemo(() => {
       const isPDF = fileType?.toLowerCase() === 'pdf' || name?.toLowerCase().endsWith('.pdf');
       return {
-        emoji: sourceType === 'document' || fileType === 'custom/document' ? metadata?.emoji : null,
+        emoji: sourceType === 'document' || fileType === PAGE_FILE_TYPE ? metadata?.emoji : null,
         isFolder: fileType === 'custom/folder',
         // PDF files should not be treated as pages, even if they have sourceType='document'
-        isPage: !isPDF && (sourceType === 'document' || fileType === 'custom/document'),
+        isPage: !isPDF && (sourceType === 'document' || fileType === PAGE_FILE_TYPE),
         isSupportedForChunking: !isChunkingUnsupported(fileType),
       };
     }, [fileType, sourceType, metadata?.emoji, name]);
@@ -260,27 +264,52 @@ const FileListItem = memo<FileListItemProps>(
     }, [name]);
 
     const handleRenameConfirm = useCallback(async () => {
+      // Prevent duplicate calls (e.g., from both Enter key and onBlur)
+      if (isConfirmingRef.current) return;
+      isConfirmingRef.current = true;
+
       if (!renamingValue.trim()) {
         message.error(t('FileManager.actions.renameError'));
+        isConfirmingRef.current = false;
         return;
       }
 
       if (renamingValue.trim() === name) {
         setIsRenaming(false);
+        isConfirmingRef.current = false;
         return;
       }
 
       try {
-        await fileStoreState.renameFolder(id, renamingValue.trim());
+        // Use optimistic updateResource for instant UI update
+        await fileStoreState.updateResource(id, { name: renamingValue.trim() });
+        if (resourceManagerState.libraryId) {
+          await clearTreeFolderCache(resourceManagerState.libraryId);
+        }
+        await fileStoreState.refreshFileList();
+
         message.success(t('FileManager.actions.renameSuccess'));
         setIsRenaming(false);
       } catch (error) {
         console.error('Rename error:', error);
         message.error(t('FileManager.actions.renameError'));
+      } finally {
+        isConfirmingRef.current = false;
       }
-    }, [renamingValue, name, fileStoreState.renameFolder, id, message, t]);
+    }, [
+      fileStoreState.refreshFileList,
+      fileStoreState.updateResource,
+      id,
+      message,
+      name,
+      renamingValue,
+      resourceManagerState.libraryId,
+      t,
+    ]);
 
     const handleRenameCancel = useCallback(() => {
+      // Don't cancel if we're in the middle of confirming
+      if (isConfirmingRef.current) return;
       setIsRenaming(false);
       setRenamingValue(name);
     }, [name]);
@@ -334,7 +363,7 @@ const FileListItem = memo<FileListItemProps>(
       fileType,
       filename: name,
       id,
-      knowledgeBaseId: resourceManagerState.libraryId,
+      libraryId: resourceManagerState.libraryId,
       onRenameStart: isFolder ? handleRenameStart : undefined,
       sourceType,
       url,

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

@@ -14,20 +14,25 @@ interface ListViewSkeletonProps {
 
 const ListViewSkeleton = ({
   columnWidths = { date: FILE_DATE_WIDTH, name: 400, size: FILE_SIZE_WIDTH },
-  count = 3,
-}: ListViewSkeletonProps) => (
-  <Flexbox>
-    {Array.from({ length: count }).map((_, index) => (
-      <Flexbox
-        align={'center'}
-        height={48}
-        horizontal
-        key={index}
-        paddingInline={8}
-        style={{
-          borderBlockEnd: `1px solid ${cssVar.colorBorderSecondary}`,
-        }}
-      >
+  count = 6,
+}: ListViewSkeletonProps) => {
+  // Calculate opacity gradient from 100% to 20%
+  const getOpacity = (index: number) => 1 - (index / (count - 1)) * 0.8;
+
+  return (
+    <Flexbox>
+      {Array.from({ length: count }).map((_, index) => (
+        <Flexbox
+          align={'center'}
+          height={48}
+          horizontal
+          key={index}
+          paddingInline={8}
+          style={{
+            borderBlockEnd: `1px solid ${cssVar.colorBorderSecondary}`,
+            opacity: getOpacity(index),
+          }}
+        >
         <Center height={40} style={{ paddingInline: 4 }}>
           <Checkbox disabled />
         </Center>
@@ -55,5 +60,6 @@ const ListViewSkeleton = ({
     ))}
   </Flexbox>
 );
+};
 
 export default ListViewSkeleton;

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

@@ -11,12 +11,14 @@ import { useDragActive } from '@/app/[variants]/(main)/resource/features/DndCont
 import { useFolderPath } from '@/app/[variants]/(main)/resource/features/hooks/useFolderPath';
 import {
   useResourceManagerFetchFolderBreadcrumb,
-  useResourceManagerFetchKnowledgeItems,
   useResourceManagerStore,
 } from '@/app/[variants]/(main)/resource/features/store';
 import { sortFileList } from '@/app/[variants]/(main)/resource/features/store/selectors';
+import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import { INITIAL_STATUS } from '@/store/global/initialState';
+import { type AsyncTaskStatus } from '@/types/asyncTask';
+import { type FileListItem as FileListItemType } from '@/types/files';
 
 import ColumnResizeHandle from './ColumnResizeHandle';
 import FileListItem from './ListItem';
@@ -52,11 +54,7 @@ const styles = createStaticStyles(({ css }) => ({
 }));
 
 const ListView = memo(() => {
-  // Access all state from Resource Manager store
   const [
-    libraryId,
-    category,
-    searchQuery,
     selectFileIds,
     setSelectedFileIds,
     pendingRenameItemId,
@@ -65,9 +63,6 @@ const ListView = memo(() => {
     sorter,
     sortType,
   ] = useResourceManagerStore((s) => [
-    s.libraryId,
-    s.category,
-    s.searchQuery,
     s.selectedFileIds,
     s.setSelectedFileIds,
     s.pendingRenameItemId,
@@ -86,12 +81,12 @@ const ListView = memo(() => {
   const { t } = useTranslation(['components', 'file']);
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
-  const [lastSelectedIndex, setLastSelectedIndex] = useState<number | null>(null);
   const isDragActive = useDragActive();
   const [isDropZoneActive, setIsDropZoneActive] = useState(false);
   const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const autoScrollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const lastSelectedIndexRef = useRef<number | null>(null);
 
   const { currentFolderSlug } = useFolderPath();
   const { data: folderBreadcrumb } = useResourceManagerFetchFolderBreadcrumb(currentFolderSlug);
@@ -99,28 +94,43 @@ const ListView = memo(() => {
   // Get current folder ID - either from breadcrumb or null for root
   const currentFolderId = folderBreadcrumb?.at(-1)?.id || null;
 
-  const { data: rawData } = useResourceManagerFetchKnowledgeItems({
-    category,
-    knowledgeBaseId: libraryId,
-    parentId: currentFolderSlug || null,
-    q: searchQuery ?? undefined,
-    showFilesInKnowledgeBase: false,
-  });
+  const resourceList = useFileStore((s) => s.resourceList);
+
+  // Map ResourceItem[] to FileListItem[] for compatibility
+  const rawData =
+    resourceList?.map<FileListItemType>((item) => ({
+      ...item,
+      chunkCount: item.chunkCount ?? null,
+      chunkingError: item.chunkingError ?? null,
+      chunkingStatus: (item.chunkingStatus ?? null) as AsyncTaskStatus | null,
+      embeddingError: item.embeddingError ?? null,
+      embeddingStatus: (item.embeddingStatus ?? null) as AsyncTaskStatus | null,
+      finishEmbedding: item.finishEmbedding ?? false,
+      url: item.url ?? '',
+    })) ?? [];
 
   // Sort data using current sort settings
-  const data = sortFileList(rawData, sorter, sortType);
+  const data = sortFileList(rawData, sorter, sortType) || [];
+
+  const dataRef = useRef<FileListItemType[]>(data);
+
+  useEffect(() => {
+    dataRef.current = data;
+  }, [data]);
 
   // Handle selection change with shift-click support for range selection
   const handleSelectionChange = useCallback(
     (id: string, checked: boolean, shiftKey: boolean, clickedIndex: number) => {
       // Always get the latest state from the store to avoid stale closure issues
       const currentSelected = useResourceManagerStore.getState().selectedFileIds;
-
-      if (shiftKey && lastSelectedIndex !== null && data) {
-        // Shift-click: select range from lastSelectedIndex to current index
-        const start = Math.min(lastSelectedIndex, clickedIndex);
-        const end = Math.max(lastSelectedIndex, clickedIndex);
-        const rangeIds = data
+      const lastIndex = lastSelectedIndexRef.current;
+      const list = dataRef.current;
+
+      if (shiftKey && lastIndex !== null && list.length > 0) {
+        // Shift-click: select range from lastIndex to current index
+        const start = Math.min(lastIndex, clickedIndex);
+        const end = Math.max(lastIndex, clickedIndex);
+        const rangeIds = list
           .slice(start, end + 1)
           .filter(Boolean)
           .map((item) => item.id);
@@ -137,14 +147,14 @@ const ListView = memo(() => {
           setSelectedFileIds(currentSelected.filter((item) => item !== id));
         }
       }
-      setLastSelectedIndex(clickedIndex);
+      lastSelectedIndexRef.current = clickedIndex;
     },
-    [lastSelectedIndex, data, setSelectedFileIds],
+    [setSelectedFileIds],
   );
 
   // Clean up invalid selections when data changes
   useEffect(() => {
-    if (data && selectFileIds.length > 0) {
+    if (selectFileIds.length > 0) {
       const validFileIds = new Set(data.map((item) => item?.id).filter(Boolean));
       const filteredSelection = selectFileIds.filter((id) => validFileIds.has(id));
       if (filteredSelection.length !== selectFileIds.length) {
@@ -156,13 +166,13 @@ const ListView = memo(() => {
   // Reset last selected index when all selections are cleared
   useEffect(() => {
     if (selectFileIds.length === 0) {
-      setLastSelectedIndex(null);
+      lastSelectedIndexRef.current = null;
     }
   }, [selectFileIds.length]);
 
   // Calculate select all checkbox state
   const { allSelected, indeterminate } = useMemo(() => {
-    const fileCount = data?.length || 0;
+    const fileCount = data.length;
     const selectedCount = selectFileIds.length;
     return {
       allSelected: fileCount > 0 && selectedCount === fileCount,
@@ -175,7 +185,7 @@ const ListView = memo(() => {
     if (allSelected) {
       setSelectedFileIds([]);
     } else {
-      setSelectedFileIds(data?.filter((item) => item).map((item) => item.id) || []);
+      setSelectedFileIds(data.map((item) => item.id));
     }
   };
 
@@ -303,7 +313,7 @@ const ListView = memo(() => {
               flexShrink: 0,
               maxWidth: columnWidths.name,
               minWidth: columnWidths.name,
-              paddingInline: 8,
+              paddingInline: 20,
               paddingInlineEnd: 16,
               position: 'relative',
               width: columnWidths.name,
@@ -364,7 +374,7 @@ const ListView = memo(() => {
         >
           <Virtuoso
             components={{ Footer }}
-            data={data || []}
+            data={data}
             defaultItemHeight={48}
             endReached={handleEndReached}
             increaseViewportBy={{ bottom: 800, top: 1200 }}

package/src/features/ResourceManager/components/Explorer/MasonryView/MasonryFileItem/index.tsx

@@ -351,7 +351,7 @@ const MasonryFileItem = memo<MasonryFileItemProps>(
       fileType,
       filename: name,
       id,
-      knowledgeBaseId,
+      libraryId: knowledgeBaseId,
       sourceType,
       url,
     });