@lobehub/chat 1.141.2 → 1.141.4

package/src/features/FileManager/FileList/index.tsx

@@ -5,7 +5,7 @@ import { VirtuosoMasonry } from '@virtuoso.dev/masonry';
 import { createStyles } from 'antd-style';
 import { useQueryState } from 'nuqs';
 import { rgba } from 'polished';
-import React, { memo, useState } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 import { Virtuoso } from 'react-virtuoso';
@@ -118,6 +118,16 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category }) => {
     }
   }, [data]);
 
+  // Memoize context object to avoid recreating on every render
+  const masonryContext = useMemo(
+    () => ({
+      knowledgeBaseId,
+      selectFileIds,
+      setSelectedFileIds,
+    }),
+    [knowledgeBaseId, selectFileIds],
+  );
+
   return !isLoading && data?.length === 0 ? (
     <EmptyStatus knowledgeBaseId={knowledgeBaseId} showKnowledgeBase={!knowledgeBaseId} />
   ) : (
@@ -195,9 +205,8 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category }) => {
               <VirtuosoMasonry
                 ItemContent={MasonryItemWrapper}
                 columnCount={columnCount}
-                context={{ knowledgeBaseId, selectFileIds, setSelectedFileIds }}
+                context={masonryContext}
                 data={data || []}
-                key={`masonry-${query || 'all'}-${data?.length || 0}`}
                 style={{
                   gap: '16px',
                 }}

package/src/store/file/slices/fileManager/action.test.ts

@@ -234,6 +234,7 @@ describe('FileManagerActions', () => {
         .mockResolvedValue({ id: 'file-1', url: 'http://example.com/file-1' });
       const refreshSpy = vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
       const dispatchSpy = vi.spyOn(result.current, 'dispatchDockFileList');
+      const parseSpy = vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
 
       await act(async () => {
         await result.current.pushDockFileList([validFile, blacklistedFile]);
@@ -252,6 +253,8 @@ describe('FileManagerActions', () => {
         onStatusUpdate: expect.any(Function),
       });
       expect(refreshSpy).toHaveBeenCalled();
+      // Should auto-parse text files
+      expect(parseSpy).toHaveBeenCalledWith(['file-1'], { skipExist: false });
     });
 
     it('should upload files with knowledgeBaseId', async () => {
@@ -263,6 +266,7 @@ describe('FileManagerActions', () => {
         .spyOn(result.current, 'uploadWithProgress')
         .mockResolvedValue({ id: 'file-1', url: 'http://example.com/file-1' });
       vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
+      vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
 
       await act(async () => {
         await result.current.pushDockFileList([file], 'kb-123');
@@ -287,6 +291,7 @@ describe('FileManagerActions', () => {
           return { id: 'file-1', url: 'http://example.com/file-1' };
         });
       vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
+      vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
       const dispatchSpy = vi.spyOn(result.current, 'dispatchDockFileList');
 
       await act(async () => {
@@ -302,6 +307,7 @@ describe('FileManagerActions', () => {
 
       const uploadSpy = vi.spyOn(result.current, 'uploadWithProgress');
       const refreshSpy = vi.spyOn(result.current, 'refreshFileList');
+      const parseSpy = vi.spyOn(result.current, 'parseFilesToChunks');
 
       await act(async () => {
         await result.current.pushDockFileList([]);
@@ -309,6 +315,88 @@ describe('FileManagerActions', () => {
 
       expect(uploadSpy).not.toHaveBeenCalled();
       expect(refreshSpy).not.toHaveBeenCalled();
+      expect(parseSpy).not.toHaveBeenCalled();
+    });
+
+    it('should auto-embed files that support chunking', async () => {
+      const { result } = renderHook(() => useStore());
+
+      const textFile = new File(['text content'], 'doc.txt', { type: 'text/plain' });
+      const pdfFile = new File(['pdf content'], 'doc.pdf', { type: 'application/pdf' });
+
+      vi.spyOn(result.current, 'uploadWithProgress')
+        .mockResolvedValueOnce({ id: 'file-1', url: 'http://example.com/file-1' })
+        .mockResolvedValueOnce({ id: 'file-2', url: 'http://example.com/file-2' });
+      vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
+      const parseSpy = vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
+
+      await act(async () => {
+        await result.current.pushDockFileList([textFile, pdfFile]);
+      });
+
+      // Should auto-parse both files that support chunking
+      expect(parseSpy).toHaveBeenCalledWith(['file-1', 'file-2'], { skipExist: false });
+    });
+
+    it('should skip auto-embed for unsupported file types (images/videos/audio)', async () => {
+      const { result } = renderHook(() => useStore());
+
+      const imageFile = new File(['image content'], 'image.png', { type: 'image/png' });
+      const videoFile = new File(['video content'], 'video.mp4', { type: 'video/mp4' });
+      const audioFile = new File(['audio content'], 'audio.mp3', { type: 'audio/mpeg' });
+
+      vi.spyOn(result.current, 'uploadWithProgress')
+        .mockResolvedValueOnce({ id: 'file-1', url: 'http://example.com/file-1' })
+        .mockResolvedValueOnce({ id: 'file-2', url: 'http://example.com/file-2' })
+        .mockResolvedValueOnce({ id: 'file-3', url: 'http://example.com/file-3' });
+      vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
+      const parseSpy = vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
+
+      await act(async () => {
+        await result.current.pushDockFileList([imageFile, videoFile, audioFile]);
+      });
+
+      // Should not auto-parse unsupported files
+      expect(parseSpy).not.toHaveBeenCalled();
+    });
+
+    it('should auto-embed only supported files in mixed upload', async () => {
+      const { result } = renderHook(() => useStore());
+
+      const textFile = new File(['text content'], 'doc.txt', { type: 'text/plain' });
+      const imageFile = new File(['image content'], 'image.png', { type: 'image/png' });
+      const pdfFile = new File(['pdf content'], 'doc.pdf', { type: 'application/pdf' });
+
+      vi.spyOn(result.current, 'uploadWithProgress')
+        .mockResolvedValueOnce({ id: 'file-1', url: 'http://example.com/file-1' })
+        .mockResolvedValueOnce({ id: 'file-2', url: 'http://example.com/file-2' })
+        .mockResolvedValueOnce({ id: 'file-3', url: 'http://example.com/file-3' });
+      vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
+      const parseSpy = vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
+
+      await act(async () => {
+        await result.current.pushDockFileList([textFile, imageFile, pdfFile]);
+      });
+
+      // Should only auto-parse text and pdf files, skip image
+      expect(parseSpy).toHaveBeenCalledWith(['file-1', 'file-3'], { skipExist: false });
+    });
+
+    it('should skip auto-embed when upload fails', async () => {
+      const { result } = renderHook(() => useStore());
+
+      const textFile = new File(['text content'], 'doc.txt', { type: 'text/plain' });
+
+      vi.spyOn(result.current, 'uploadWithProgress').mockResolvedValue(undefined);
+      vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
+      const parseSpy = vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
+
+      await act(async () => {
+        await result.current.pushDockFileList([textFile]);
+      });
+
+      // Should not auto-parse when upload returns undefined
+      expect(parseSpy).not.toHaveBeenCalled();
     });
   });
 

package/src/store/file/slices/fileManager/action.ts

@@ -11,6 +11,7 @@ import {
   uploadFileListReducer,
 } from '@/store/file/reducers/uploadFileList';
 import { FileListItem, QueryFileListParams } from '@/types/files';
+import { isChunkingUnsupported } from '@/utils/isChunkingUnsupported';
 
 import { FileStore } from '../../store';
 import { fileManagerSelectors } from './selectors';
@@ -98,17 +99,28 @@ export const createFileManageSlice: StateCreator<
       type: 'addFiles',
     });
 
-    const pools = files.map(async (file) => {
-      await get().uploadWithProgress({
-        file,
-        knowledgeBaseId,
-        onStatusUpdate: dispatchDockFileList,
-      });
+    const uploadResults = await Promise.all(
+      files.map(async (file) => {
+        const result = await get().uploadWithProgress({
+          file,
+          knowledgeBaseId,
+          onStatusUpdate: dispatchDockFileList,
+        });
 
-      await get().refreshFileList();
-    });
+        await get().refreshFileList();
 
-    await Promise.all(pools);
+        return { file, fileId: result?.id, fileType: file.type };
+      }),
+    );
+
+    // 2. auto-embed files that support chunking
+    const fileIdsToEmbed = uploadResults
+      .filter(({ fileType, fileId }) => fileId && !isChunkingUnsupported(fileType))
+      .map(({ fileId }) => fileId!);
+
+    if (fileIdsToEmbed.length > 0) {
+      await get().parseFilesToChunks(fileIdsToEmbed, { skipExist: false });
+    }
   },
 
   reEmbeddingChunks: async (id) => {