@lobehub/chat 1.140.0 → 1.141.1

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

@@ -0,0 +1,57 @@
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    padding: 12px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+    background: ${token.colorBgContainer};
+  `,
+  grid: css`
+    display: grid;
+    gap: 16px;
+    padding-block: 12px;
+    padding-inline: 24px;
+  `,
+}));
+
+interface MasonrySkeletonProps {
+  columnCount: number;
+}
+
+const MasonrySkeleton = memo<MasonrySkeletonProps>(({ columnCount }) => {
+  const { styles } = useStyles();
+  // Generate varying heights for more natural masonry look
+  const heights = [180, 220, 200, 190, 240, 210, 200, 230, 180, 220, 210, 190];
+
+  return (
+    <div
+      className={styles.grid}
+      style={{
+        gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
+      }}
+    >
+      {Array.from({ length: 12 }).map((_, index) => (
+        <div className={styles.card} key={index}>
+          <Skeleton
+            active
+            paragraph={{
+              rows: 3,
+              width: ['100%', '80%', '60%'],
+            }}
+            style={{
+              height: heights[index],
+            }}
+            title={false}
+          />
+        </div>
+      ))}
+    </div>
+  );
+});
+
+MasonrySkeleton.displayName = 'MasonrySkeleton';
+
+export default MasonrySkeleton;

package/src/features/FileManager/FileList/ToolBar/ViewSwitcher.tsx

@@ -0,0 +1,45 @@
+import { ActionIcon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Grid3x3Icon, ListIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+export type ViewMode = 'list' | 'masonry';
+
+interface ViewSwitcherProps {
+  onViewChange: (view: ViewMode) => void;
+  view: ViewMode;
+}
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    gap: 4px;
+  `,
+}));
+
+const ViewSwitcher = memo<ViewSwitcherProps>(({ onViewChange, view }) => {
+  const { t } = useTranslation('components');
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox className={styles.container} horizontal>
+      <ActionIcon
+        active={view === 'list'}
+        icon={ListIcon}
+        onClick={() => onViewChange('list')}
+        size={16}
+        title={t('FileManager.view.list')}
+      />
+      <ActionIcon
+        active={view === 'masonry'}
+        icon={Grid3x3Icon}
+        onClick={() => onViewChange('masonry')}
+        size={16}
+        title={t('FileManager.view.masonry')}
+      />
+    </Flexbox>
+  );
+});
+
+export default ViewSwitcher;

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

@@ -10,6 +10,7 @@ import { isChunkingUnsupported } from '@/utils/isChunkingUnsupported';
 
 import Config from './Config';
 import MultiSelectActions, { MultiSelectActionType } from './MultiSelectActions';
+import ViewSwitcher, { ViewMode } from './ViewSwitcher';
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css`
@@ -23,12 +24,14 @@ interface MultiSelectActionsProps {
   config: { showFilesInKnowledgeBase: boolean };
   knowledgeBaseId?: string;
   onConfigChange: (config: { showFilesInKnowledgeBase: boolean }) => void;
+  onViewChange: (view: ViewMode) => void;
   selectCount: number;
   selectFileIds: string[];
   setSelectedFileIds: (ids: string[]) => void;
   showConfig?: boolean;
   total?: number;
   totalFileIds: string[];
+  viewMode: ViewMode;
 }
 
 const ToolBar = memo<MultiSelectActionsProps>(
@@ -42,6 +45,8 @@ const ToolBar = memo<MultiSelectActionsProps>(
     config,
     onConfigChange,
     knowledgeBaseId,
+    viewMode,
+    onViewChange,
   }) => {
     const { styles } = useStyles();
 
@@ -111,7 +116,10 @@ const ToolBar = memo<MultiSelectActionsProps>(
           selectCount={selectCount}
           total={total}
         />
-        {showConfig && <Config config={config} onConfigChange={onConfigChange} />}
+        <Flexbox gap={8} horizontal>
+          <ViewSwitcher onViewChange={onViewChange} view={viewMode} />
+          {showConfig && <Config config={config} onConfigChange={onConfigChange} />}
+        </Flexbox>
       </Flexbox>
     );
   },

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

@@ -1,21 +1,26 @@
 'use client';
 
 import { Text } from '@lobehub/ui';
+import { VirtuosoMasonry } from '@virtuoso.dev/masonry';
 import { createStyles } from 'antd-style';
 import { useQueryState } from 'nuqs';
 import { rgba } from 'polished';
-import { memo, useState } from 'react';
+import React, { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 import { Virtuoso } from 'react-virtuoso';
 
 import { useFileStore } from '@/store/file';
+import { useGlobalStore } from '@/store/global';
 import { SortType } from '@/types/files';
 
 import EmptyStatus from './EmptyStatus';
 import FileListItem, { FILE_DATE_WIDTH, FILE_SIZE_WIDTH } from './FileListItem';
 import FileSkeleton from './FileSkeleton';
+import MasonryItemWrapper from './MasonryFileItem/MasonryItemWrapper';
+import MasonrySkeleton from './MasonrySkeleton';
 import ToolBar from './ToolBar';
+import { ViewMode } from './ToolBar/ViewSwitcher';
 import { useCheckTaskStatus } from './useCheckTaskStatus';
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
@@ -47,6 +52,35 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category }) => {
   const [selectFileIds, setSelectedFileIds] = useState<string[]>([]);
   const [viewConfig, setViewConfig] = useState({ showFilesInKnowledgeBase: false });
 
+  const viewMode = useGlobalStore((s) => s.status.fileManagerViewMode || 'list') as ViewMode;
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+  const setViewMode = (mode: ViewMode) => updateSystemStatus({ fileManagerViewMode: mode });
+
+  const [columnCount, setColumnCount] = useState(4);
+
+  // Update column count based on window size
+  const updateColumnCount = () => {
+    const width = window.innerWidth;
+    if (width < 768) {
+      setColumnCount(2);
+    } else if (width < 1024) {
+      setColumnCount(3);
+    } else if (width < 1440) {
+      setColumnCount(4);
+    } else {
+      setColumnCount(5);
+    }
+  };
+
+  // Set initial column count and listen for resize
+  React.useEffect(() => {
+    if (viewMode === 'masonry') {
+      updateColumnCount();
+      window.addEventListener('resize', updateColumnCount);
+      return () => window.removeEventListener('resize', updateColumnCount);
+    }
+  }, [viewMode]);
+
   const [query] = useQueryState('q', {
     clearOnDefault: true,
   });
@@ -73,6 +107,17 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category }) => {
 
   useCheckTaskStatus(data);
 
+  // Clean up selected files that no longer exist in the data
+  React.useEffect(() => {
+    if (data && 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) {
+        setSelectedFileIds(filteredSelection);
+      }
+    }
+  }, [data]);
+
   return !isLoading && data?.length === 0 ? (
     <EmptyStatus knowledgeBaseId={knowledgeBaseId} showKnowledgeBase={!knowledgeBaseId} />
   ) : (
@@ -83,28 +128,36 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category }) => {
           key={selectFileIds.join('-')}
           knowledgeBaseId={knowledgeBaseId}
           onConfigChange={setViewConfig}
+          onViewChange={setViewMode}
           selectCount={selectFileIds.length}
           selectFileIds={selectFileIds}
           setSelectedFileIds={setSelectedFileIds}
           showConfig={!knowledgeBaseId}
           total={data?.length}
           totalFileIds={data?.map((item) => item.id) || []}
+          viewMode={viewMode}
         />
-        <Flexbox align={'center'} className={styles.header} horizontal paddingInline={8}>
-          <Flexbox className={styles.headerItem} flex={1} style={{ paddingInline: 32 }}>
-            {t('FileManager.title.title')}
+        {viewMode === 'list' && (
+          <Flexbox align={'center'} className={styles.header} horizontal paddingInline={8}>
+            <Flexbox className={styles.headerItem} flex={1} style={{ paddingInline: 32 }}>
+              {t('FileManager.title.title')}
+            </Flexbox>
+            <Flexbox className={styles.headerItem} width={FILE_DATE_WIDTH}>
+              {t('FileManager.title.createdAt')}
+            </Flexbox>
+            <Flexbox className={styles.headerItem} width={FILE_SIZE_WIDTH}>
+              {t('FileManager.title.size')}
+            </Flexbox>
           </Flexbox>
-          <Flexbox className={styles.headerItem} width={FILE_DATE_WIDTH}>
-            {t('FileManager.title.createdAt')}
-          </Flexbox>
-          <Flexbox className={styles.headerItem} width={FILE_SIZE_WIDTH}>
-            {t('FileManager.title.size')}
-          </Flexbox>
-        </Flexbox>
+        )}
       </Flexbox>
       {isLoading ? (
-        <FileSkeleton />
-      ) : (
+        viewMode === 'masonry' ? (
+          <MasonrySkeleton columnCount={columnCount} />
+        ) : (
+          <FileSkeleton />
+        )
+      ) : viewMode === 'list' ? (
         <Virtuoso
           components={{
             Footer: () => (
@@ -135,6 +188,23 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category }) => {
           )}
           style={{ flex: 1 }}
         />
+      ) : (
+        <div style={{ flex: 1, overflow: 'hidden' }}>
+          <div style={{ height: '100%', overflowY: 'auto' }}>
+            <div style={{ paddingBlockEnd: 64, paddingBlockStart: 12, paddingInline: 24 }}>
+              <VirtuosoMasonry
+                ItemContent={MasonryItemWrapper}
+                columnCount={columnCount}
+                context={{ knowledgeBaseId, selectFileIds, setSelectedFileIds }}
+                data={data || []}
+                key={`masonry-${query || 'all'}-${data?.length || 0}`}
+                style={{
+                  gap: '16px',
+                }}
+              />
+            </div>
+          </div>
+        </div>
       )}
     </Flexbox>
   );

package/src/features/FileManager/Header/FilesSearchBar.tsx

@@ -2,7 +2,7 @@
 
 import { SearchBar } from '@lobehub/ui';
 import { useQueryState } from 'nuqs';
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useUserStore } from '@/store/user';
@@ -14,10 +14,15 @@ const FilesSearchBar = memo<{ mobile?: boolean }>(({ mobile }) => {
   const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.Search));
   const [keywords, setKeywords] = useState<string>('');
 
-  const [, setQuery] = useQueryState('q', {
+  const [query, setQuery] = useQueryState('q', {
     clearOnDefault: true,
   });
 
+  // Sync local state with URL query parameter
+  useEffect(() => {
+    setKeywords(query || '');
+  }, [query]);
+
   return (
     <SearchBar
       allowClear

package/src/features/ShareModal/ShareImage/Preview.tsx

@@ -22,7 +22,7 @@ const Preview = memo<FieldType & { title?: string }>(
   ({ title, withSystemRole, withBackground, withFooter }) => {
     const [model, plugins, systemRole] = useAgentStore((s) => [
       agentSelectors.currentAgentModel(s),
-      agentSelectors.currentAgentPlugins(s),
+      agentSelectors.displayableAgentPlugins(s),
       agentSelectors.currentAgentSystemRole(s),
     ]);
     const [isInbox, description, avatar, backgroundColor] = useSessionStore((s) => [

package/src/features/ShareModal/SharePdf/PdfPreview.tsx

@@ -0,0 +1,361 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { Button } from '@lobehub/ui';
+import { Input, Modal, Spin } from 'antd';
+import { createStyles } from 'antd-style';
+import { ChevronLeft, ChevronRight, Expand, FileText } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { Document, Page, pdfjs } from 'react-pdf';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import { useContainerStyles } from '../style';
+
+// Set PDF.js worker
+pdfjs.GlobalWorkerOptions.workerSrc = `https://registry.npmmirror.com/pdfjs-dist/${pdfjs.version}/files/build/pdf.worker.min.mjs`;
+
+const useStyles = createStyles(({ css }) => ({
+  containerWrapper: css`
+    position: relative;
+    width: 100%;
+    height: 100%;
+  `,
+  documentLoading: css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    height: 100%;
+    padding: 20px;
+  `,
+  emptyState: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 100%;
+
+    color: #666;
+  `,
+  expandButton: css`
+    position: absolute;
+    z-index: 1000;
+    inset-block-start: 20px;
+    inset-inline-end: 20px;
+  `,
+  footerNavigation: css`
+    position: absolute;
+    z-index: 10;
+    inset-block-end: 0;
+    inset-inline: 0 0;
+
+    padding: 12px;
+    border-block-start: 1px solid rgba(0, 0, 0, 10%);
+
+    background: rgba(255, 255, 255, 90%);
+    backdrop-filter: blur(8px);
+  `,
+  fullscreenButton: css`
+    border-color: white;
+    color: white;
+  `,
+  fullscreenContent: css`
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+
+    min-height: 100%;
+    padding: 20px;
+  `,
+  fullscreenModal: css`
+    position: relative;
+    overflow: auto;
+    height: 90vh;
+  `,
+  fullscreenNavigation: css`
+    position: fixed;
+    z-index: 1001;
+    inset-block-end: 20px;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+
+    padding-block: 12px;
+    padding-inline: 20px;
+    border-radius: 8px;
+
+    background: rgba(0, 0, 0, 70%);
+    backdrop-filter: blur(8px);
+  `,
+  fullscreenPageInput: css`
+    width: 60px;
+    text-align: center;
+  `,
+  fullscreenPageText: css`
+    min-width: 20px;
+    font-size: 14px;
+    color: white;
+  `,
+  loadingState: css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    height: 100%;
+  `,
+  loadingText: css`
+    margin-block-start: 8px;
+    color: #666;
+  `,
+  pageInput: css`
+    width: 50px;
+    text-align: center;
+  `,
+  pageNumberText: css`
+    font-size: 12px;
+    color: #666;
+  `,
+  previewContainer: css`
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 12px;
+  `,
+}));
+
+interface PdfPreviewProps {
+  loading: boolean;
+  onGeneratePdf?: () => void;
+  pdfData: string | null;
+}
+
+const PdfPreview = memo<PdfPreviewProps>(({ loading, pdfData, onGeneratePdf }) => {
+  const { styles } = useContainerStyles();
+  const { styles: localStyles } = useStyles();
+  const { t } = useTranslation('chat');
+  const isMobile = useIsMobile();
+
+  // Page navigation state
+  const [numPages, setNumPages] = useState<number>(0);
+  const [pageNumber, setPageNumber] = useState<number>(1);
+  const [fullscreenOpen, setFullscreenOpen] = useState(false);
+  const [fullscreenPageNumber, setFullscreenPageNumber] = useState<number>(1);
+
+  const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
+    setNumPages(numPages);
+    setPageNumber(1);
+  };
+
+  const goToPrevPage = () => {
+    if (pageNumber > 1) {
+      setPageNumber(pageNumber - 1);
+    }
+  };
+
+  const goToNextPage = () => {
+    if (pageNumber < numPages) {
+      setPageNumber(pageNumber + 1);
+    }
+  };
+
+  const goToPage = (page: number) => {
+    if (page >= 1 && page <= numPages) {
+      setPageNumber(page);
+    }
+  };
+
+  const handleFullscreen = () => {
+    if (pdfData) {
+      setFullscreenPageNumber(pageNumber);
+      setFullscreenOpen(true);
+    }
+  };
+
+  const goToFullscreenPrevPage = () => {
+    if (fullscreenPageNumber > 1) {
+      setFullscreenPageNumber(fullscreenPageNumber - 1);
+    }
+  };
+
+  const goToFullscreenNextPage = () => {
+    if (fullscreenPageNumber < numPages) {
+      setFullscreenPageNumber(fullscreenPageNumber + 1);
+    }
+  };
+
+  const goToFullscreenPage = (page: number) => {
+    if (page >= 1 && page <= numPages) {
+      setFullscreenPageNumber(page);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className={styles.preview} style={{ padding: 12 }}>
+        <div className={localStyles.loadingState}>
+          <Spin indicator={<LoadingOutlined spin style={{ fontSize: 24 }} />} />
+          <div className={localStyles.loadingText}>{t('shareModal.generatingPdf')}</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!pdfData) {
+    return (
+      <div className={styles.preview} style={{ padding: 12 }}>
+        <div className={localStyles.emptyState}>
+          <Button icon={<FileText size={20} />} onClick={onGeneratePdf} size="large" type="primary">
+            {t('shareModal.generatePdf', { defaultValue: '生成 PDF' })}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // Convert base64 to data URI
+  const pdfDataUri = `data:application/pdf;base64,${pdfData}`;
+
+  return (
+    <>
+      <div className={localStyles.containerWrapper}>
+        {pdfData && (
+          <Button
+            className={localStyles.expandButton}
+            icon={<Expand size={16} />}
+            onClick={handleFullscreen}
+            size="small"
+            type="text"
+          />
+        )}
+
+        <div className={`${styles.preview} ${localStyles.previewContainer}`}>
+          <Document
+            file={pdfDataUri}
+            loading={
+              <div className={localStyles.documentLoading}>
+                <Spin />
+                <div className={localStyles.loadingText}>
+                  {t('shareModal.loadingPdf', { defaultValue: 'Loading PDF...' })}
+                </div>
+              </div>
+            }
+            onLoadSuccess={onDocumentLoadSuccess}
+          >
+            <Page
+              pageNumber={pageNumber}
+              renderAnnotationLayer={false}
+              renderTextLayer={false}
+              width={isMobile ? 300 : 400}
+            />
+          </Document>
+        </div>
+
+        {/* 页脚导航 */}
+        {pdfData && numPages > 1 && (
+          <div className={localStyles.footerNavigation}>
+            <Flexbox align="center" gap={8} horizontal justify="center">
+              <Button
+                disabled={pageNumber <= 1}
+                icon={<ChevronLeft size={16} />}
+                onClick={goToPrevPage}
+                size="small"
+                type="text"
+              />
+              <Flexbox align="center" gap={4} horizontal>
+                <Input
+                  className={localStyles.pageInput}
+                  max={numPages}
+                  min={1}
+                  onChange={(e) => {
+                    const value = parseInt(e.target.value);
+                    if (!isNaN(value)) goToPage(value);
+                  }}
+                  size="small"
+                  type="number"
+                  value={pageNumber}
+                />
+                <span className={localStyles.pageNumberText}>/ {numPages}</span>
+              </Flexbox>
+              <Button
+                disabled={pageNumber >= numPages}
+                icon={<ChevronRight size={16} />}
+                onClick={goToNextPage}
+                size="small"
+                type="text"
+              />
+            </Flexbox>
+          </div>
+        )}
+      </div>
+
+      {/* 全屏模态框 */}
+      <Modal
+        centered
+        footer={null}
+        onCancel={() => setFullscreenOpen(false)}
+        open={fullscreenOpen}
+        styles={{
+          body: { padding: 0 },
+          content: { padding: 0 },
+        }}
+        width="95vw"
+      >
+        <div className={localStyles.fullscreenModal}>
+          <div className={localStyles.fullscreenContent}>
+            <Document file={pdfDataUri} onLoadSuccess={onDocumentLoadSuccess}>
+              <Page
+                pageNumber={fullscreenPageNumber}
+                renderAnnotationLayer={false}
+                renderTextLayer={false}
+                width={Math.min(window.innerWidth * 0.8, 1000)}
+              />
+            </Document>
+          </div>
+
+          {/* 全屏模式下的导航 */}
+          {numPages > 1 && (
+            <div className={localStyles.fullscreenNavigation}>
+              <Flexbox align="center" gap={12} horizontal>
+                <Button
+                  className={localStyles.fullscreenButton}
+                  disabled={fullscreenPageNumber <= 1}
+                  icon={<ChevronLeft size={16} />}
+                  onClick={goToFullscreenPrevPage}
+                  size="small"
+                  type="text"
+                />
+                <Flexbox align="center" gap={8} horizontal>
+                  <Input
+                    className={localStyles.fullscreenPageInput}
+                    max={numPages}
+                    min={1}
+                    onChange={(e) => {
+                      const value = parseInt(e.target.value);
+                      if (!isNaN(value)) goToFullscreenPage(value);
+                    }}
+                    size="small"
+                    type="number"
+                    value={fullscreenPageNumber}
+                  />
+                  <span className={localStyles.fullscreenPageText}>/ {numPages}</span>
+                </Flexbox>
+                <Button
+                  className={localStyles.fullscreenButton}
+                  disabled={fullscreenPageNumber >= numPages}
+                  icon={<ChevronRight size={16} />}
+                  onClick={goToFullscreenNextPage}
+                  size="small"
+                  type="text"
+                />
+              </Flexbox>
+            </div>
+          )}
+        </div>
+      </Modal>
+    </>
+  );
+});
+
+export default PdfPreview;