@lobehub/lobehub 2.0.0-next.54 → 2.0.0-next.56

package/src/features/{FileManager/FileList → KnowledgeManager/FileExplorer}/index.tsx

@@ -12,7 +12,7 @@ import { Virtuoso } from 'react-virtuoso';
 
 import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
-import { SortType } from '@/types/files';
+import { FilesTabs, SortType } from '@/types/files';
 
 import EmptyStatus from './EmptyStatus';
 import FileListItem, { FILE_DATE_WIDTH, FILE_SIZE_WIDTH } from './FileListItem';
@@ -40,13 +40,13 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   `,
 }));
 
-interface FileListProps {
+interface FileExplorerProps {
   category?: string;
   knowledgeBaseId?: string;
   onOpenFile: (id: string) => void;
 }
 
-const FileList = memo<FileListProps>(({ knowledgeBaseId, category, onOpenFile }) => {
+const FileExplorer = memo<FileExplorerProps>(({ knowledgeBaseId, category, onOpenFile }) => {
   const { t } = useTranslation('components');
   const { styles } = useStyles();
 
@@ -54,11 +54,19 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category, onOpenFile })
   const [viewConfig, setViewConfig] = useState({ showFilesInKnowledgeBase: false });
   const [lastSelectedIndex, setLastSelectedIndex] = useState<number | null>(null);
   const [isTransitioning, setIsTransitioning] = useState(false);
+  const [isMasonryReady, setIsMasonryReady] = useState(false);
 
-  const viewMode = useGlobalStore((s) => s.status.fileManagerViewMode || 'list') as ViewMode;
+  // Always use masonry view for Images category, ignore stored preference
+  const storedViewMode = useGlobalStore((s) => s.status.fileManagerViewMode);
+  const viewMode = (
+    category === FilesTabs.Images ? 'masonry' : storedViewMode || 'list'
+  ) as ViewMode;
   const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
   const setViewMode = (mode: ViewMode) => {
     setIsTransitioning(true);
+    if (mode === 'masonry') {
+      setIsMasonryReady(false);
+    }
     updateSystemStatus({ fileManagerViewMode: mode });
   };
 
@@ -71,7 +79,7 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category, onOpenFile })
       setColumnCount(2);
     } else if (width < 1024) {
       setColumnCount(3);
-    } else if (width < 1440) {
+    } else if (width < 1536) {
       setColumnCount(4);
     } else {
       setColumnCount(5);
@@ -100,9 +108,9 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category, onOpenFile })
     defaultValue: SortType.Desc,
   });
 
-  const useFetchFileManage = useFileStore((s) => s.useFetchFileManage);
+  const useFetchKnowledgeItems = useFileStore((s) => s.useFetchKnowledgeItems);
 
-  const { data, isLoading } = useFetchFileManage({
+  const { data, isLoading } = useFetchKnowledgeItems({
     category,
     knowledgeBaseId,
     q: query,
@@ -124,6 +132,20 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category, onOpenFile })
     }
   }, [isTransitioning, viewMode, data]);
 
+  // Mark masonry as ready after it has time to mount and render
+  React.useEffect(() => {
+    if (viewMode === 'masonry' && data && !isLoading && !isTransitioning) {
+      // Give VirtuosoMasonry enough time to fully render and calculate layout
+      const timer = setTimeout(() => {
+        setIsMasonryReady(true);
+      }, 300);
+      return () => clearTimeout(timer);
+    } else if (viewMode === 'list') {
+      // Reset when switching to list view
+      setIsMasonryReady(false);
+    }
+  }, [viewMode, data, isLoading, isTransitioning]);
+
   useCheckTaskStatus(data);
 
   // Clean up selected files that no longer exist in the data
@@ -188,12 +210,8 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category, onOpenFile })
           </Flexbox>
         )}
       </Flexbox>
-      {isLoading || isTransitioning ? (
-        viewMode === 'masonry' ? (
-          <MasonrySkeleton columnCount={columnCount} />
-        ) : (
-          <FileSkeleton />
-        )
+      {isLoading || (viewMode === 'list' && isTransitioning) ? (
+        <FileSkeleton />
       ) : viewMode === 'list' ? (
         <Virtuoso
           components={{
@@ -243,8 +261,29 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category, onOpenFile })
           style={{ flex: 1 }}
         />
       ) : (
-        <div style={{ flex: 1, overflow: 'hidden' }}>
-          <div style={{ height: '100%', overflowY: 'auto' }}>
+        <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
+          {/* Skeleton overlay */}
+          {(isTransitioning || !isMasonryReady) && (
+            <div
+              style={{
+                background: 'inherit',
+                inset: 0,
+                position: 'absolute',
+                zIndex: 10,
+              }}
+            >
+              <MasonrySkeleton columnCount={columnCount} />
+            </div>
+          )}
+          {/* Masonry content - always rendered but hidden until ready */}
+          <div
+            style={{
+              height: '100%',
+              opacity: isMasonryReady ? 1 : 0,
+              overflowY: 'auto',
+              transition: 'opacity 0.2s ease-in-out',
+            }}
+          >
             <div style={{ paddingBlockEnd: 64, paddingBlockStart: 12, paddingInline: 24 }}>
               <VirtuosoMasonry
                 ItemContent={MasonryItemWrapper}
@@ -263,4 +302,4 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category, onOpenFile })
   );
 });
 
-export default FileList;
+export default FileExplorer;

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

@@ -0,0 +1,118 @@
+'use client';
+
+import { Button, Dropdown, Icon, MenuProps } from '@lobehub/ui';
+import { Upload } from 'antd';
+import { css, cx } from 'antd-style';
+import { FilePenLine, FileUp, FolderIcon, FolderUp, Plus } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DragUpload from '@/components/DragUpload';
+import { useFileStore } from '@/store/file';
+
+import NoteEditorModal from '../DocumentExplorer/NoteEditorModal';
+
+const hotArea = css`
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: transparent;
+  }
+`;
+
+const AddButton = ({ knowledgeBaseId }: { knowledgeBaseId?: string }) => {
+  const { t } = useTranslation('file');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const pushDockFileList = useFileStore((s) => s.pushDockFileList);
+
+  const handleOpenNoteEditor = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseNoteEditor = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCreateFolder = () => {
+    setIsModalOpen(false);
+    console.log('create folder');
+  };
+
+  const items = useMemo<MenuProps['items']>(
+    () => [
+      {
+        icon: <Icon icon={FilePenLine} />,
+        key: 'create-note',
+        label: t('header.actions.newPage'),
+        onClick: handleOpenNoteEditor,
+      },
+      {
+        icon: <Icon icon={FolderIcon} />,
+        key: 'create-folder',
+        label: t('header.actions.newFolder'),
+        onClick: handleCreateFolder,
+      },
+      {
+        type: 'divider',
+      },
+      {
+        icon: <Icon icon={FileUp} />,
+        key: 'upload-file',
+        label: (
+          <Upload
+            beforeUpload={async (file) => {
+              await pushDockFileList([file], knowledgeBaseId);
+
+              return false;
+            }}
+            multiple={true}
+            showUploadList={false}
+          >
+            <div className={cx(hotArea)}>{t('header.actions.uploadFile')}</div>
+          </Upload>
+        ),
+      },
+      {
+        icon: <Icon icon={FolderUp} />,
+        key: 'upload-folder',
+        label: (
+          <Upload
+            beforeUpload={async (file) => {
+              await pushDockFileList([file], knowledgeBaseId);
+
+              return false;
+            }}
+            directory
+            multiple={true}
+            showUploadList={false}
+          >
+            <div className={cx(hotArea)}>{t('header.actions.uploadFolder')}</div>
+          </Upload>
+        ),
+      },
+    ],
+    [knowledgeBaseId, pushDockFileList],
+  );
+
+  return (
+    <>
+      <Dropdown menu={{ items }} placement="bottomRight">
+        <Button icon={Plus} type="primary">
+          {t('addKnowledge')}
+        </Button>
+      </Dropdown>
+      <DragUpload
+        enabledFiles
+        onUploadFiles={(files) => pushDockFileList(files, knowledgeBaseId)}
+      />
+      <NoteEditorModal
+        knowledgeBaseId={knowledgeBaseId}
+        onClose={handleCloseNoteEditor}
+        open={isModalOpen}
+      />
+    </>
+  );
+};
+
+export default AddButton;

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { Button } from '@lobehub/ui';
+import { FilePenLine } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import NoteEditorModal from '../DocumentExplorer/NoteEditorModal';
+
+const NewNoteButton = ({ knowledgeBaseId }: { knowledgeBaseId?: string }) => {
+  const { t } = useTranslation('file');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleOpen = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      <Button icon={FilePenLine} onClick={handleOpen} type="primary">
+        {t('header.newDocumentButton')}
+      </Button>
+
+      <NoteEditorModal knowledgeBaseId={knowledgeBaseId} onClose={handleClose} open={isModalOpen} />
+    </>
+  );
+};
+
+export default NewNoteButton;

package/src/features/{FileManager → KnowledgeManager}/Header/index.tsx

@@ -3,20 +3,14 @@
 import { ChatHeader } from '@lobehub/ui/chat';
 import { memo } from 'react';
 
+import AddButton from './AddButton';
 import FilesSearchBar from './FilesSearchBar';
-import TogglePanelButton from './TogglePanelButton';
-import UploadFileButton from './UploadFileButton';
 
 const Header = memo<{ knowledgeBaseId?: string }>(({ knowledgeBaseId }) => {
   return (
     <ChatHeader
-      left={
-        <>
-          <TogglePanelButton />
-          <FilesSearchBar />
-        </>
-      }
-      right={<UploadFileButton knowledgeBaseId={knowledgeBaseId} />}
+      left={<FilesSearchBar />}
+      right={<AddButton knowledgeBaseId={knowledgeBaseId} />}
       styles={{
         left: { padding: 0 },
       }}

package/src/features/KnowledgeManager/Home/RecentDocumentCard.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import markdownToTxt from 'markdown-to-txt';
+import { memo } from 'react';
+
+import { FileListItem } from '@/types/files';
+
+// Helper to extract title from markdown content
+const extractTitle = (content: string): string | null => {
+  if (!content) return null;
+
+  // Find first markdown header (# title)
+  const match = content.match(/^#\s+(.+)$/m);
+  return match ? match[1].trim() : null;
+};
+
+// Helper to extract preview text from note content
+const getPreviewText = (item: FileListItem): string => {
+  if (!item.content) return '';
+
+  // Convert markdown to plain text
+  let plainText = markdownToTxt(item.content);
+
+  // Remove the title line if it exists
+  const title = extractTitle(item.content);
+  if (title) {
+    plainText = plainText.replace(title, '').trim();
+  }
+
+  // Limit to first 200 characters for preview
+  return plainText.slice(0, 200);
+};
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    cursor: pointer;
+    user-select: none;
+
+    position: relative;
+
+    overflow: hidden;
+    flex-shrink: 0;
+
+    width: 280px;
+    height: 180px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    background: ${token.colorBgContainer};
+
+    transition: all ${token.motionDurationMid};
+
+    &:hover {
+      border-color: ${token.colorPrimary};
+      box-shadow: ${token.boxShadowTertiary};
+    }
+  `,
+  noteContent: css`
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    height: 100%;
+    padding: 12px;
+  `,
+  notePreview: css`
+    overflow: hidden;
+    display: -webkit-box;
+    flex: 1;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+
+    font-size: 13px;
+    line-height: 1.6;
+    color: ${token.colorTextSecondary};
+  `,
+  noteTitle: css`
+    overflow: hidden;
+
+    font-size: 14px;
+    font-weight: ${token.fontWeightStrong};
+    line-height: 1.4;
+    color: ${token.colorText};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+}));
+
+interface RecentDocumentCardProps {
+  document: FileListItem;
+  onClick: () => void;
+}
+
+const RecentDocumentCard = memo<RecentDocumentCardProps>(({ document, onClick }) => {
+  const { styles } = useStyles();
+
+  const title = document.name || '';
+  const previewText = getPreviewText(document);
+  const emoji = document.metadata?.emoji;
+
+  return (
+    <div className={styles.card} onClick={onClick} role="button" tabIndex={0}>
+      <div className={styles.noteContent}>
+        <div style={{ alignItems: 'center', display: 'flex', gap: 8 }}>
+          {emoji && <span style={{ fontSize: 20 }}>{emoji}</span>}
+          <div className={styles.noteTitle}>{title}</div>
+        </div>
+        {previewText && <div className={styles.notePreview}>{previewText}</div>}
+      </div>
+    </div>
+  );
+});
+
+export default RecentDocumentCard;

package/src/features/KnowledgeManager/Home/RecentDocuments.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+import { FileListItem } from '@/types/files';
+
+import RecentDocumentCard from './RecentDocumentCard';
+import RecentFilesSkeleton from './RecentFilesSkeleton';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    position: relative;
+    overflow: hidden;
+  `,
+  fadeEdge: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block: 0 0;
+    inset-inline-end: 0;
+
+    width: 80px;
+
+    background: linear-gradient(to left, ${token.colorBgContainerSecondary}, transparent);
+  `,
+  scrollContainer: css`
+    scroll-behavior: smooth;
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+
+    overflow: auto hidden;
+    display: flex;
+    gap: 16px;
+
+    padding-block-end: 8px;
+    padding-inline-end: 80px;
+
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `,
+}));
+
+interface RecentDocumentsProps {
+  documents: FileListItem[];
+  isLoading?: boolean;
+  onOpenDocument: (id: string) => void;
+}
+
+const RecentDocuments = memo<RecentDocumentsProps>(({ documents, isLoading, onOpenDocument }) => {
+  const { styles } = useStyles();
+
+  if (isLoading) {
+    return <RecentFilesSkeleton />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.scrollContainer}>
+        {documents.map((document) => (
+          <RecentDocumentCard
+            document={document}
+            key={document.id}
+            onClick={() => onOpenDocument(document.id)}
+          />
+        ))}
+      </div>
+      <div className={styles.fadeEdge} />
+    </div>
+  );
+});
+
+export default RecentDocuments;

package/src/features/KnowledgeManager/Home/RecentFileCard.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { formatSize } from '@lobechat/utils/format';
+import { Image as LobeImage, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { FileListItem } from '@/types/files';
+
+const IMAGE_FILE_TYPES = new Set([
+  'image/png',
+  'image/jpeg',
+  'image/jpg',
+  'image/gif',
+  'image/webp',
+  'image/svg+xml',
+]);
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+    flex-shrink: 0;
+
+    width: 280px;
+    padding: 12px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    background: ${token.colorBgContainer};
+
+    transition: all ${token.motionDurationMid};
+
+    &:hover {
+      border-color: ${token.colorPrimary};
+      box-shadow: ${token.boxShadowTertiary};
+    }
+  `,
+  iconWrapper: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 160px;
+    margin-block-end: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    background: ${token.colorBgLayout};
+  `,
+  imagePreview: css`
+    width: 100%;
+    height: 160px;
+    margin-block-end: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    object-fit: cover;
+    background: ${token.colorBgLayout};
+  `,
+  info: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin: 0 !important;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+  `,
+}));
+
+interface RecentFileCardProps {
+  file: FileListItem;
+  onClick: () => void;
+}
+
+const RecentFileCard = memo<RecentFileCardProps>(({ file, onClick }) => {
+  const { styles } = useStyles();
+
+  const isImage = IMAGE_FILE_TYPES.has(file.fileType);
+  const relativeTime = dayjs(file.updatedAt).fromNow();
+
+  return (
+    <div className={styles.card} onClick={onClick} role="button" tabIndex={0}>
+      <Flexbox gap={12} style={{ position: 'relative' }}>
+        {/* Preview or Icon */}
+        {isImage && file.url ? (
+          <LobeImage
+            alt={file.name}
+            className={styles.imagePreview}
+            preview={false}
+            src={file.url}
+          />
+        ) : (
+          <div className={styles.iconWrapper}>
+            <FileIcon fileName={file.name} fileType={file.fileType} size={48} />
+          </div>
+        )}
+
+        {/* File Info */}
+        <Flexbox gap={6} style={{ overflow: 'hidden', position: 'relative' }}>
+          <Text className={styles.title} ellipsis={{ rows: 2 }}>
+            {file.name}
+          </Text>
+          <Flexbox className={styles.info} gap={8} horizontal>
+            <span>{relativeTime}</span>
+            <span>•</span>
+            <span>{formatSize(file.size)}</span>
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+    </div>
+  );
+});
+
+export default RecentFileCard;

package/src/features/KnowledgeManager/Home/RecentFiles.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+import { FileListItem } from '@/types/files';
+
+import RecentFileCard from './RecentFileCard';
+import RecentFilesSkeleton from './RecentFilesSkeleton';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    position: relative;
+    overflow: hidden;
+  `,
+  fadeEdge: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block: 0 0;
+    inset-inline-end: 0;
+
+    width: 80px;
+
+    background: linear-gradient(to left, ${token.colorBgContainerSecondary}, transparent);
+  `,
+  scrollContainer: css`
+    scroll-behavior: smooth;
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+
+    overflow: auto hidden;
+    display: flex;
+    gap: 16px;
+
+    padding-block-end: 8px;
+    padding-inline-end: 80px;
+
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `,
+}));
+
+interface RecentFilesProps {
+  files: FileListItem[];
+  isLoading?: boolean;
+  onOpenFile: (id: string) => void;
+}
+
+const RecentFiles = memo<RecentFilesProps>(({ files, isLoading, onOpenFile }) => {
+  const { styles } = useStyles();
+
+  if (isLoading) {
+    return <RecentFilesSkeleton />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.scrollContainer}>
+        {files.map((file) => (
+          <RecentFileCard file={file} key={file.id} onClick={() => onOpenFile(file.id)} />
+        ))}
+      </div>
+      <div className={styles.fadeEdge} />
+    </div>
+  );
+});
+
+export default RecentFiles;