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

package/src/features/KnowledgeManager/FileExplorer/MasonryFileItem/NoteFileItem.tsx

@@ -0,0 +1,230 @@
+import { Button, Tooltip } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { isNull } from 'lodash-es';
+import { FileBoxIcon } from 'lucide-react';
+import markdownToTxt from 'markdown-to-txt';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import FileIcon from '@/components/FileIcon';
+import { fileManagerSelectors, useFileStore } from '@/store/file';
+import { AsyncTaskStatus, IAsyncTaskError } from '@/types/asyncTask';
+import { isChunkingUnsupported } from '@/utils/isChunkingUnsupported';
+
+import ChunksBadge from '../FileListItem/ChunkTag';
+
+const useStyles = createStyles(({ css, token }) => ({
+  floatingChunkBadge: css`
+    position: absolute;
+    z-index: 3;
+    inset-block-end: 8px;
+    inset-inline-end: 8px;
+
+    border-radius: ${token.borderRadius}px;
+
+    opacity: 0;
+    background: ${token.colorBgContainer};
+    box-shadow: ${token.boxShadow};
+
+    transition: opacity ${token.motionDurationMid};
+  `,
+  iconWrapper: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 120px;
+    margin-block-end: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    background: ${token.colorFillQuaternary};
+  `,
+  markdownLoading: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-height: 120px;
+    border-radius: ${token.borderRadiusLG}px;
+
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+
+    background: ${token.colorFillQuaternary};
+  `,
+  noteContent: css`
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    width: 100%;
+    min-height: 120px;
+    padding: 16px;
+    border-radius: ${token.borderRadiusLG}px;
+
+    background: ${token.colorFillQuaternary};
+  `,
+  notePreview: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 6;
+
+    font-size: 13px;
+    line-height: 1.6;
+    color: ${token.colorTextSecondary};
+  `,
+  noteTitle: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    font-size: 16px;
+    font-weight: ${token.fontWeightStrong};
+    line-height: 1.4;
+    color: ${token.colorText};
+  `,
+}));
+
+// 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 = (content: string): string => {
+  if (!content) return '';
+
+  // Convert markdown to plain text
+  let plainText = markdownToTxt(content);
+
+  // Remove the title line if it exists
+  const title = extractTitle(content);
+  if (title) {
+    plainText = plainText.replace(title, '').trim();
+  }
+
+  // Limit to first 400 characters for preview
+  return plainText.slice(0, 400);
+};
+
+interface NoteFileItemProps {
+  chunkCount?: number | null;
+  chunkingError?: IAsyncTaskError | null;
+  chunkingStatus?: AsyncTaskStatus | null;
+  embeddingError?: IAsyncTaskError | null;
+  embeddingStatus?: AsyncTaskStatus | null;
+  fileType?: string;
+  finishEmbedding?: boolean;
+  id: string;
+  isLoadingMarkdown: boolean;
+  markdownContent: string;
+  metadata?: Record<string, any> | null;
+  name: string;
+}
+
+const NoteFileItem = memo<NoteFileItemProps>(
+  ({
+    chunkCount,
+    chunkingError,
+    chunkingStatus,
+    embeddingError,
+    embeddingStatus,
+    fileType,
+    finishEmbedding,
+    id,
+    isLoadingMarkdown,
+    markdownContent,
+    name,
+    metadata,
+  }) => {
+    const { t } = useTranslation(['components', 'file']);
+    const { styles, cx } = useStyles();
+    const [isCreatingFileParseTask, parseFiles] = useFileStore((s) => [
+      fileManagerSelectors.isCreatingFileParseTask(id)(s),
+      s.parseFilesToChunks,
+    ]);
+
+    const isSupportedForChunking = !isChunkingUnsupported(fileType || '');
+
+    const extractedTitle = markdownContent ? extractTitle(markdownContent) : null;
+    const displayTitle = extractedTitle || name || t('file:documentList.untitled');
+    const emoji = metadata?.emoji;
+    const previewText = markdownContent ? getPreviewText(markdownContent) : '';
+
+    return (
+      <>
+        <div style={{ position: 'relative' }}>
+          {isLoadingMarkdown ? (
+            <div className={styles.markdownLoading}>Loading preview...</div>
+          ) : markdownContent ? (
+            <div className={styles.noteContent}>
+              <div className={styles.noteTitle}>
+                {emoji && <span style={{ fontSize: 20 }}>{emoji}</span>}
+                <span>{displayTitle}</span>
+              </div>
+              {previewText ? (
+                <div className={styles.notePreview}>{previewText}</div>
+              ) : (
+                <div className={styles.notePreview}>
+                  <span style={{ color: 'var(--lobe-text-tertiary)', fontStyle: 'italic' }}>
+                    No content
+                  </span>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className={styles.iconWrapper}>
+              <FileIcon fileName={name} fileType={fileType} size={64} />
+            </div>
+          )}
+        </div>
+        {/* Floating chunk badge or action button */}
+        {!isNull(chunkingStatus) && chunkingStatus ? (
+          <div
+            className={cx('floatingChunkBadge', styles.floatingChunkBadge)}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <ChunksBadge
+              chunkCount={chunkCount}
+              chunkingError={chunkingError}
+              chunkingStatus={chunkingStatus}
+              embeddingError={embeddingError}
+              embeddingStatus={embeddingStatus}
+              finishEmbedding={finishEmbedding}
+              id={id}
+            />
+          </div>
+        ) : (
+          isSupportedForChunking && (
+            <Tooltip title={t('FileManager.actions.chunkingTooltip')}>
+              <div
+                className={cx('floatingChunkBadge', styles.floatingChunkBadge)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (!isCreatingFileParseTask) {
+                    parseFiles([id]);
+                  }
+                }}
+                style={{ cursor: 'pointer' }}
+              >
+                <Button
+                  icon={FileBoxIcon}
+                  loading={isCreatingFileParseTask}
+                  size={'small'}
+                  type={'text'}
+                />
+              </div>
+            </Tooltip>
+          )
+        )}
+      </>
+    );
+  },
+);
+
+export default NoteFileItem;

package/src/features/KnowledgeManager/FileExplorer/MasonryFileItem/index.tsx

@@ -0,0 +1,398 @@
+import { Checkbox } from 'antd';
+import { createStyles } from 'antd-style';
+import React, { memo, useEffect, useRef, useState } from 'react';
+
+import { documentService } from '@/services/document';
+import { FileListItem } from '@/types/files';
+
+import NoteEditorModal from '../../DocumentExplorer/NoteEditorModal';
+import DropdownMenu from '../FileListItem/DropdownMenu';
+import DefaultFileItem from './DefaultFileItem';
+import ImageFileItem from './ImageFileItem';
+import MarkdownFileItem from './MarkdownFileItem';
+import NoteFileItem from './NoteFileItem';
+
+// Image file types
+const IMAGE_TYPES = new Set([
+  'image/png',
+  'image/jpeg',
+  'image/jpg',
+  'image/gif',
+  'image/webp',
+  'image/svg+xml',
+]);
+
+// Markdown file types
+const MARKDOWN_TYPES = new Set(['text/markdown', 'text/x-markdown']);
+
+// Custom note file type
+const CUSTOM_NOTE_TYPE = 'custom/document';
+
+// Helper to check if filename ends with .md or is a custom note
+const isMarkdownFile = (name: string, fileType?: string) => {
+  return (
+    name.toLowerCase().endsWith('.md') ||
+    name.toLowerCase().endsWith('.markdown') ||
+    (fileType && MARKDOWN_TYPES.has(fileType))
+  );
+};
+
+// Helper to check if it's a custom note that should be rendered
+const isCustomNote = (fileType?: string) => {
+  return fileType === CUSTOM_NOTE_TYPE;
+};
+
+// Helper function to extract text from editor's JSON format for preview
+const extractTextFromEditorJSON = (editorData: any): string => {
+  if (!editorData || !editorData.root || !editorData.root.children) {
+    return '';
+  }
+
+  const extractFromNode = (node: any): string => {
+    if (!node) return '';
+
+    // If node has text, return it
+    if (node.text) return node.text;
+
+    // If node has children, recursively extract text
+    if (node.children && Array.isArray(node.children)) {
+      return node.children.map((child: any) => extractFromNode(child)).join('');
+    }
+
+    return '';
+  };
+
+  return editorData.root.children.map((node: any) => extractFromNode(node)).join('\n');
+};
+
+const useStyles = createStyles(({ css, token }) => ({
+  actions: css`
+    opacity: 0;
+    transition: opacity ${token.motionDurationMid};
+  `,
+  card: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    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};
+
+      .actions {
+        opacity: 1;
+      }
+
+      .checkbox {
+        opacity: 1;
+      }
+
+      .dropdown {
+        opacity: 1;
+      }
+
+      .floatingChunkBadge {
+        opacity: 1;
+      }
+    }
+  `,
+  checkbox: css`
+    position: absolute;
+    z-index: 2;
+    inset-block-start: 8px;
+    inset-inline-start: 8px;
+
+    opacity: 0;
+
+    transition: opacity ${token.motionDurationMid};
+  `,
+  content: css`
+    position: relative;
+  `,
+  contentWithPadding: css`
+    padding: 12px;
+  `,
+  dropdown: css`
+    position: absolute;
+    z-index: 2;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+
+    opacity: 0;
+
+    transition: opacity ${token.motionDurationMid};
+  `,
+  selected: css`
+    border-color: ${token.colorPrimary};
+    background: ${token.colorPrimaryBg};
+
+    .checkbox {
+      opacity: 1;
+    }
+  `,
+}));
+
+interface MasonryFileItemProps extends FileListItem {
+  knowledgeBaseId?: string;
+  onOpen: (id: string) => void;
+  onSelectedChange: (id: string, selected: boolean) => void;
+  selected?: boolean;
+}
+
+const MasonryFileItem = memo<MasonryFileItemProps>(
+  ({
+    chunkingError,
+    editorData,
+    embeddingError,
+    embeddingStatus,
+    finishEmbedding,
+    chunkCount,
+    url,
+    name,
+    fileType,
+    id,
+    selected,
+    chunkingStatus,
+    onSelectedChange,
+    knowledgeBaseId,
+    size,
+    onOpen,
+    metadata,
+  }) => {
+    const { styles, cx } = useStyles();
+    const [markdownContent, setMarkdownContent] = useState<string>('');
+    const [isLoadingMarkdown, setIsLoadingMarkdown] = useState(false);
+    const [isNoteModalOpen, setIsNoteModalOpen] = useState(false);
+
+    const isImage = fileType && IMAGE_TYPES.has(fileType);
+    const isMarkdown = isMarkdownFile(name, fileType);
+    const isNote = isCustomNote(fileType);
+
+    // Debug: Log editorData for notes
+    useEffect(() => {
+      if (isNote) {
+        console.log('[MasonryFileItem] Note item:', {
+          editorDataPreview: editorData ? JSON.stringify(editorData).slice(0, 100) : null,
+          editorDataType: typeof editorData,
+          hasEditorData: !!editorData,
+          id,
+          name,
+        });
+      }
+    }, [isNote, id, name, editorData]);
+
+    const cardRef = useRef<HTMLDivElement>(null);
+    const [isInView, setIsInView] = useState(false);
+
+    // Use Intersection Observer to detect when card enters viewport
+    useEffect(() => {
+      if (!cardRef.current) return;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && !isInView) {
+              setIsInView(true);
+            }
+          });
+        },
+        {
+          rootMargin: '200px', // Increased margin to load content earlier
+          threshold: 0.01, // Lower threshold for earlier triggering
+        },
+      );
+
+      observer.observe(cardRef.current);
+
+      return () => {
+        observer.disconnect();
+      };
+    }, [isInView]);
+
+    // Fetch markdown content only when in viewport
+    useEffect(() => {
+      if ((isMarkdown || isNote) && isInView && !markdownContent) {
+        setIsLoadingMarkdown(true);
+
+        const fetchContent = async () => {
+          try {
+            let text: string;
+
+            if (isNote) {
+              // For custom notes, fetch from document service
+              const document = await documentService.getDocumentById(id);
+              const content = document?.content || '';
+
+              // Try to parse as JSON (editor's native format) and convert to markdown for preview
+              try {
+                const editorData = JSON.parse(content);
+                // Since we can't easily convert JSON to markdown here without an editor instance,
+                // we'll extract plain text from the JSON structure for preview
+                text = extractTextFromEditorJSON(editorData);
+              } catch {
+                // If it's not JSON, use it as-is (might be old markdown format)
+                text = content;
+              }
+            } else if (url) {
+              // For regular markdown files, fetch from URL
+              const res = await fetch(url);
+              text = await res.text();
+            } else {
+              text = '';
+            }
+
+            // For custom notes, take more content for better preview; for regular markdown, take first 500 chars
+            const preview = isNote ? text.slice(0, 1000) : text.slice(0, 500);
+            setMarkdownContent(preview);
+          } catch (error) {
+            console.error('Failed to fetch markdown content:', error);
+            setMarkdownContent('');
+          } finally {
+            setIsLoadingMarkdown(false);
+          }
+        };
+
+        fetchContent();
+      }
+    }, [isMarkdown, isNote, url, isInView, markdownContent, id]);
+
+    return (
+      <div className={cx(styles.card, selected && styles.selected)} ref={cardRef}>
+        <div
+          className={cx('checkbox', styles.checkbox)}
+          onClick={(e) => {
+            e.stopPropagation();
+            onSelectedChange(id, !selected);
+          }}
+        >
+          <Checkbox checked={selected} />
+        </div>
+
+        <div className={cx('dropdown', styles.dropdown)} onClick={(e) => e.stopPropagation()}>
+          <DropdownMenu filename={name} id={id} knowledgeBaseId={knowledgeBaseId} url={url} />
+        </div>
+
+        <div
+          className={cx(
+            styles.content,
+            !isImage && !isMarkdown && !isNote && styles.contentWithPadding,
+          )}
+          onClick={() => {
+            if (isNote) {
+              console.log('[MasonryFileItem] Opening note modal with:', {
+                editorDataType: typeof editorData,
+                hasEditorData: !!editorData,
+                id,
+                name,
+              });
+              setIsNoteModalOpen(true);
+            } else {
+              onOpen(id);
+            }
+          }}
+        >
+          {(() => {
+            switch (true) {
+              case isImage && !!url: {
+                return (
+                  <ImageFileItem
+                    chunkCount={chunkCount ?? undefined}
+                    chunkingError={chunkingError}
+                    chunkingStatus={chunkingStatus ?? undefined}
+                    embeddingError={embeddingError}
+                    embeddingStatus={embeddingStatus ?? undefined}
+                    fileType={fileType}
+                    finishEmbedding={finishEmbedding}
+                    id={id}
+                    isInView={isInView}
+                    name={name}
+                    size={size}
+                    url={url}
+                  />
+                );
+              }
+              case isNote: {
+                return (
+                  <NoteFileItem
+                    chunkCount={chunkCount ?? undefined}
+                    chunkingError={chunkingError}
+                    chunkingStatus={chunkingStatus ?? undefined}
+                    embeddingError={embeddingError}
+                    embeddingStatus={embeddingStatus ?? undefined}
+                    fileType={fileType}
+                    finishEmbedding={finishEmbedding}
+                    id={id}
+                    isLoadingMarkdown={isLoadingMarkdown}
+                    markdownContent={markdownContent}
+                    metadata={metadata}
+                    name={name}
+                  />
+                );
+              }
+              case isMarkdown: {
+                return (
+                  <MarkdownFileItem
+                    chunkCount={chunkCount ?? undefined}
+                    chunkingError={chunkingError}
+                    chunkingStatus={chunkingStatus ?? undefined}
+                    embeddingError={embeddingError}
+                    embeddingStatus={embeddingStatus ?? undefined}
+                    fileType={fileType}
+                    finishEmbedding={finishEmbedding}
+                    id={id}
+                    isLoadingMarkdown={isLoadingMarkdown}
+                    markdownContent={markdownContent}
+                    name={name}
+                    size={size}
+                  />
+                );
+              }
+              default: {
+                return (
+                  <DefaultFileItem
+                    chunkCount={chunkCount ?? undefined}
+                    chunkingError={chunkingError}
+                    chunkingStatus={chunkingStatus ?? undefined}
+                    embeddingError={embeddingError}
+                    embeddingStatus={embeddingStatus ?? undefined}
+                    fileType={fileType}
+                    finishEmbedding={finishEmbedding}
+                    id={id}
+                    name={name}
+                    size={size}
+                  />
+                );
+              }
+            }
+          })()}
+        </div>
+
+        {/* Note Editor Modal */}
+        {isNote && (
+          <NoteEditorModal
+            documentId={id}
+            documentTitle={name}
+            editorData={editorData}
+            knowledgeBaseId={knowledgeBaseId}
+            onClose={() => {
+              console.log('[MasonryFileItem] Closing note modal');
+              setIsNoteModalOpen(false);
+            }}
+            open={isNoteModalOpen}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+export default MasonryFileItem;

package/src/features/KnowledgeManager/FileExplorer/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;