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

package/src/features/KnowledgeManager/DocumentExplorer/DocumentEditorPlaceholder.tsx

@@ -0,0 +1,169 @@
+import { FileTypeIcon, Icon, Text } from '@lobehub/ui';
+import { Upload } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import { ArrowUpIcon, PlusIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useFileStore } from '@/store/file';
+
+const ICON_SIZE = 80;
+
+const useStyles = createStyles(({ css, token }) => ({
+  actionTitle: css`
+    margin-block-start: 12px;
+    font-size: 16px;
+    color: ${token.colorTextSecondary};
+  `,
+  card: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    width: 200px;
+    height: 140px;
+    border-radius: ${token.borderRadiusLG}px;
+
+    font-weight: 500;
+    text-align: center;
+
+    background: ${token.colorFillTertiary};
+    box-shadow: 0 0 0 1px ${token.colorFillTertiary} inset;
+
+    transition: background 0.3s ease-in-out;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+  glow: css`
+    position: absolute;
+    inset-block-end: -12px;
+    inset-inline-end: 0;
+
+    width: 48px;
+    height: 48px;
+
+    opacity: 0.5;
+    filter: blur(24px);
+  `,
+  icon: css`
+    position: absolute;
+    z-index: 1;
+    inset-block-end: -24px;
+    inset-inline-end: 8px;
+
+    flex: none;
+  `,
+}));
+
+interface DocumentEditorPlaceholderProps {
+  knowledgeBaseId?: string;
+  onCreateNewNote: () => void;
+  onNoteCreated?: (noteId: string) => void;
+}
+
+const DocumentEditorPlaceholder = memo<DocumentEditorPlaceholderProps>(
+  ({ knowledgeBaseId, onCreateNewNote, onNoteCreated }) => {
+    const { t } = useTranslation(['file', 'common']);
+    const theme = useTheme();
+    const { styles } = useStyles();
+    const [isUploading, setIsUploading] = useState(false);
+    const createDocument = useFileStore((s) => s.createDocument);
+
+    const handleUploadMarkdown = async (file: File) => {
+      try {
+        setIsUploading(true);
+
+        // Read markdown file content
+        const content = await file.text();
+
+        // Create document with markdown content
+        const newDoc = await createDocument({
+          content,
+          knowledgeBaseId,
+          title: file.name.replace(/\.md$|\.markdown$/i, ''),
+        });
+
+        // Notify parent component
+        onNoteCreated?.(newDoc.id);
+      } catch (error) {
+        console.error('Failed to upload markdown:', error);
+      } finally {
+        setIsUploading(false);
+      }
+
+      return false; // Prevent default upload behavior
+    };
+
+    return (
+      <Center gap={24} height={'100%'} style={{ paddingBottom: 100 }} width={'100%'}>
+        <Flexbox justify={'center'} style={{ textAlign: 'center' }}>
+          <Text as={'h4'}>{t('documentEditor.empty.title')}</Text>
+          <Text type={'secondary'}>{t('or', { ns: 'common' })}</Text>
+        </Flexbox>
+        <Flexbox gap={12} horizontal>
+          {/* Create New Note */}
+          <Flexbox className={styles.card} onClick={onCreateNewNote} padding={16}>
+            <span className={styles.actionTitle}>
+              {t('documentEditor.empty.createNewDocument')}
+            </span>
+            <div className={styles.glow} style={{ background: theme.purple }} />
+            <FileTypeIcon
+              className={styles.icon}
+              color={theme.purple}
+              icon={<Icon color={'#fff'} icon={PlusIcon} />}
+              size={ICON_SIZE}
+              type={'file'}
+            />
+          </Flexbox>
+
+          {/* Upload Markdown File */}
+          <Upload
+            accept=".md,.markdown"
+            beforeUpload={handleUploadMarkdown}
+            disabled={isUploading}
+            multiple={false}
+            showUploadList={false}
+          >
+            <Flexbox
+              className={styles.card}
+              padding={16}
+              style={{ opacity: isUploading ? 0.5 : 1 }}
+            >
+              <span className={styles.actionTitle}>
+                {isUploading ? 'Uploading...' : t('documentEditor.empty.uploadMarkdown')}
+              </span>
+              <div className={styles.glow} style={{ background: theme.gold }} />
+              <FileTypeIcon
+                className={styles.icon}
+                color={theme.gold}
+                icon={<Icon color={'#fff'} icon={ArrowUpIcon} />}
+                size={ICON_SIZE}
+                type={'file'}
+              />
+            </Flexbox>
+          </Upload>
+
+          {/* Import from Notion */}
+          {/* <Flexbox className={styles.card} onClick={handleImportFromNotion} padding={16}>
+          <span className={styles.actionTitle}>Import from Notion</span>
+          <div className={styles.glow} style={{ background: theme.geekblue }} />
+          <FileTypeIcon
+            className={styles.icon}
+            color={theme.geekblue}
+            icon={<Icon color={'#fff'} icon={FileTextIcon} />}
+            size={ICON_SIZE}
+            type={'doc'}
+          />
+        </Flexbox> */}
+        </Flexbox>
+      </Center>
+    );
+  },
+);
+
+export default DocumentEditorPlaceholder;

package/src/features/KnowledgeManager/DocumentExplorer/DocumentListItem.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { FileText } from 'lucide-react';
+import { memo } from 'react';
+
+import { LobeDocument } from '@/types/document';
+
+import DocumentActions from './DocumentActions';
+import RenamePopover from './RenamePopover';
+
+const useStyles = createStyles(({ css, token }) => ({
+  documentActions: css`
+    opacity: 0;
+    transition: opacity ${token.motionDurationMid};
+  `,
+  documentCard: css`
+    cursor: pointer;
+    user-select: none;
+
+    position: relative;
+
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    min-height: 36px;
+    margin-block: 4px;
+    margin-inline: 8px;
+    padding-block: 8px;
+    padding-inline: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    color: ${token.colorTextSecondary};
+
+    background: transparent;
+
+    transition: all ${token.motionDurationMid};
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+
+      .document-actions {
+        opacity: 1;
+      }
+    }
+
+    &.selected {
+      color: ${token.colorText};
+      background: ${token.colorFillSecondary};
+    }
+  `,
+  documentContent: css`
+    display: flex;
+    flex: 1;
+    gap: 12px;
+    align-items: center;
+
+    min-width: 0;
+  `,
+  documentTitle: css`
+    overflow: hidden;
+    flex: 1;
+
+    min-width: 0;
+
+    font-size: 14px;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+  emoji: css`
+    font-size: 16px;
+    line-height: 1;
+  `,
+  icon: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${token.colorTextSecondary};
+  `,
+}));
+
+interface DocumentListItemProps {
+  document: LobeDocument;
+  isRenaming: boolean;
+  isSelected: boolean;
+  onDelete: () => void;
+  onRenameConfirm: (documentId: string, title: string, emoji?: string) => void;
+  onRenameOpenChange: (documentId: string, open: boolean) => void;
+  onSelect: (documentId: string) => void;
+  untitledText: string;
+}
+
+const DocumentListItem = memo<DocumentListItemProps>(
+  ({
+    document,
+    isRenaming,
+    isSelected,
+    onDelete,
+    onRenameConfirm,
+    onRenameOpenChange,
+    onSelect,
+    untitledText,
+  }) => {
+    const { styles, cx } = useStyles();
+
+    const title = document.title || untitledText;
+    const emoji = document.metadata?.emoji;
+
+    return (
+      <div
+        className={cx(styles.documentCard, isSelected && 'selected')}
+        onClick={() => !isRenaming && onSelect(document.id)}
+      >
+        <RenamePopover
+          currentEmoji={emoji}
+          currentTitle={title}
+          onConfirm={(newTitle, newEmoji) => {
+            onRenameConfirm(document.id, newTitle, newEmoji);
+          }}
+          onOpenChange={(open) => onRenameOpenChange(document.id, open)}
+          open={isRenaming}
+        >
+          <div className={styles.documentContent}>
+            {emoji ? (
+              <span className={styles.emoji}>{emoji}</span>
+            ) : (
+              <Icon className={styles.icon} icon={FileText} size={16} />
+            )}
+            <div className={styles.documentTitle}>{title}</div>
+          </div>
+        </RenamePopover>
+        <div className={cx(styles.documentActions, 'document-actions')}>
+          <DocumentActions
+            documentContent={document.content || undefined}
+            documentId={document.id}
+            onDelete={onDelete}
+            onRename={() => onRenameOpenChange(document.id, true)}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+export default DocumentListItem;

package/src/features/KnowledgeManager/DocumentExplorer/DocumentListSkeleton.tsx

@@ -0,0 +1,39 @@
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  skeletonCard: css`
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    min-height: 36px;
+    margin-block: 4px;
+    margin-inline: 8px;
+    padding-block: 8px;
+    padding-inline: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    background: transparent;
+  `,
+}));
+
+const DocumentListSkeleton = () => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox>
+      {Array.from({ length: 8 }).map((_, index) => (
+        <div className={styles.skeletonCard} key={index}>
+          {/* Icon skeleton */}
+          <Skeleton.Avatar active shape="square" size={16} />
+          {/* Title skeleton */}
+          <Skeleton.Input active size="small" style={{ height: 20, minWidth: 120, width: 120 }} />
+        </div>
+      ))}
+    </Flexbox>
+  );
+};
+
+export default DocumentListSkeleton;

package/src/features/KnowledgeManager/DocumentExplorer/NoteEditorModal.tsx

@@ -0,0 +1,348 @@
+'use client';
+
+import {
+  HotkeyEnum,
+  ReactCodePlugin,
+  ReactCodeblockPlugin,
+  ReactHRPlugin,
+  ReactLinkHighlightPlugin,
+  ReactListPlugin,
+  ReactMathPlugin,
+  ReactTablePlugin,
+  getHotkeyById,
+} from '@lobehub/editor';
+import {
+  ChatInputActionBar,
+  ChatInputActions,
+  type ChatInputActionsProps,
+  CodeLanguageSelect,
+  Editor,
+  useEditor,
+  useEditorState,
+} from '@lobehub/editor/react';
+import { Modal } from '@lobehub/ui';
+import { css, cx, useTheme } from 'antd-style';
+import {
+  BoldIcon,
+  CodeXmlIcon,
+  ItalicIcon,
+  ListIcon,
+  ListOrderedIcon,
+  ListTodoIcon,
+  MessageSquareQuote,
+  SigmaIcon,
+  SquareDashedBottomCodeIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+} from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { message } from '@/components/AntdStaticMethods';
+import { documentService } from '@/services/document';
+import { useFileStore } from '@/store/file';
+
+const editorClassName = cx(css`
+  p {
+    margin-block-end: 0;
+  }
+`);
+
+interface NoteEditorModalProps {
+  documentId?: string;
+  documentTitle?: string;
+  editorData?: Record<string, any> | null;
+  knowledgeBaseId?: string;
+  onClose: () => void;
+  open: boolean;
+}
+
+const NoteEditorModal = memo<NoteEditorModalProps>(
+  ({ open, onClose, documentId, documentTitle, editorData: cachedEditorData, knowledgeBaseId }) => {
+    const { t } = useTranslation(['file', 'editor']);
+    const theme = useTheme();
+
+    const editor = useEditor();
+    const editorState = useEditorState(editor);
+
+    const [isSaving, setIsSaving] = useState(false);
+    const [noteTitle, setNoteTitle] = useState('');
+    const refreshFileList = useFileStore((s) => s.refreshFileList);
+    const isEditMode = !!documentId;
+
+    const handleClose = () => {
+      // Clean up editor state
+      editor?.cleanDocument();
+      setNoteTitle('');
+      onClose();
+    };
+
+    const handleSave = async () => {
+      if (!editor || isSaving) return;
+
+      // Get editor content as JSON (native format)
+      const editorData = editor.getDocument('json');
+
+      // Check if editor is empty by getting text content
+      const textContent = (editor.getDocument('markdown') as unknown as string) || '';
+      if (!textContent || textContent.trim() === '') {
+        message.warning(t('header.newNoteDialog.emptyContent', { ns: 'file' }));
+        return;
+      }
+
+      setIsSaving(true);
+
+      try {
+        if (isEditMode) {
+          // Update existing note
+          await documentService.updateDocument({
+            content: textContent,
+            editorData: JSON.stringify(editorData),
+            id: documentId,
+            title: noteTitle,
+          });
+          message.success(t('header.newNoteDialog.updateSuccess', { ns: 'file' }));
+        } else {
+          // Create new note
+          const now = Date.now();
+          const timestamp = new Date(now).toLocaleString('en-US', {
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            month: 'short',
+            year: 'numeric',
+          });
+          const title = noteTitle || `Note - ${timestamp}`;
+
+          await documentService.createDocument({
+            content: textContent,
+            editorData: JSON.stringify(editorData),
+            fileType: 'custom/document',
+            knowledgeBaseId,
+            metadata: {
+              createdAt: now,
+            },
+            title,
+          });
+
+          message.success(t('header.newNoteDialog.saveSuccess', { ns: 'file' }));
+          editor.cleanDocument();
+        }
+
+        onClose();
+        await refreshFileList();
+      } catch (error) {
+        console.error('Failed to save note:', error);
+        message.error(t('header.newNoteDialog.saveError', { ns: 'file' }));
+      } finally {
+        setIsSaving(false);
+      }
+    };
+
+    const handleOpenChange = (isOpen: boolean) => {
+      // When modal opens, load document content if in edit mode
+      if (isOpen && documentId && editor) {
+        console.log('[NoteEditorModal] Loading content:', {
+          cachedEditorDataPreview: cachedEditorData
+            ? JSON.stringify(cachedEditorData).slice(0, 100)
+            : null,
+          cachedEditorDataType: typeof cachedEditorData,
+          documentId,
+          documentTitle,
+          hasCachedEditorData: !!cachedEditorData,
+        });
+
+        // If editorData is already cached (from list), use it directly
+        if (cachedEditorData) {
+          console.log('[NoteEditorModal] Using cached editorData', cachedEditorData);
+          setNoteTitle(documentTitle || '');
+          editor.setDocument('json', JSON.stringify(cachedEditorData));
+          return;
+        }
+
+        // Otherwise, fetch full content from API
+        console.log('[NoteEditorModal] Fetching from API');
+        documentService
+          .getDocumentById(documentId)
+          .then((doc) => {
+            if (doc && doc.content) {
+              setNoteTitle(doc.title || doc.filename || '');
+
+              console.log('[NoteEditorModal] Fetched doc.editorData:', {
+                editorDataPreview: doc.editorData
+                  ? JSON.stringify(doc.editorData).slice(0, 100)
+                  : null,
+                editorDataType: typeof doc.editorData,
+                hasEditorData: !!doc.editorData,
+              });
+
+              editor.setDocument('json', doc.editorData);
+            }
+          })
+          .catch((error) => {
+            console.error('[NoteEditorModal] Failed to load document:', error);
+            message.error(t('header.newNoteDialog.loadError', { ns: 'file' }));
+          });
+      }
+
+      // When modal closes, clean up state
+      if (!isOpen) {
+        editor?.cleanDocument();
+        setNoteTitle('');
+      }
+    };
+
+    const toolbarItems: ChatInputActionsProps['items'] = useMemo(
+      () =>
+        [
+          {
+            active: editorState.isBold,
+            icon: BoldIcon,
+            key: 'bold',
+            label: t('typobar.bold', { ns: 'editor' }),
+            onClick: editorState.bold,
+            tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Bold).keys },
+          },
+          {
+            active: editorState.isItalic,
+            icon: ItalicIcon,
+            key: 'italic',
+            label: t('typobar.italic', { ns: 'editor' }),
+            onClick: editorState.italic,
+            tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Italic).keys },
+          },
+          {
+            active: editorState.isUnderline,
+            icon: UnderlineIcon,
+            key: 'underline',
+            label: t('typobar.underline', { ns: 'editor' }),
+            onClick: editorState.underline,
+            tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Underline).keys },
+          },
+          {
+            active: editorState.isStrikethrough,
+            icon: StrikethroughIcon,
+            key: 'strikethrough',
+            label: t('typobar.strikethrough', { ns: 'editor' }),
+            onClick: editorState.strikethrough,
+            tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Strikethrough).keys },
+          },
+          {
+            type: 'divider',
+          },
+          {
+            icon: ListIcon,
+            key: 'bulletList',
+            label: t('typobar.bulletList', { ns: 'editor' }),
+            onClick: editorState.bulletList,
+            tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.BulletList).keys },
+          },
+          {
+            icon: ListOrderedIcon,
+            key: 'numberlist',
+            label: t('typobar.numberList', { ns: 'editor' }),
+            onClick: editorState.numberList,
+            tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.NumberList).keys },
+          },
+          {
+            icon: ListTodoIcon,
+            key: 'tasklist',
+            label: t('typobar.taskList', { ns: 'editor' }),
+            onClick: editorState.checkList,
+          },
+          {
+            type: 'divider',
+          },
+          {
+            active: editorState.isBlockquote,
+            icon: MessageSquareQuote,
+            key: 'blockquote',
+            label: t('typobar.blockquote', { ns: 'editor' }),
+            onClick: editorState.blockquote,
+          },
+          {
+            type: 'divider',
+          },
+          {
+            icon: SigmaIcon,
+            key: 'math',
+            label: t('typobar.tex', { ns: 'editor' }),
+            onClick: editorState.insertMath,
+          },
+          {
+            active: editorState.isCode,
+            icon: CodeXmlIcon,
+            key: 'code',
+            label: t('typobar.code', { ns: 'editor' }),
+            onClick: editorState.code,
+            tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.CodeInline).keys },
+          },
+          {
+            icon: SquareDashedBottomCodeIcon,
+            key: 'codeblock',
+            label: t('typobar.codeblock', { ns: 'editor' }),
+            onClick: editorState.codeblock,
+          },
+          editorState.isCodeblock && {
+            children: (
+              <CodeLanguageSelect
+                onSelect={(value) => editorState.updateCodeblockLang(value)}
+                value={editorState.codeblockLang}
+              />
+            ),
+            disabled: !editorState.isCodeblock,
+            key: 'codeblockLang',
+          },
+        ].filter(Boolean) as ChatInputActionsProps['items'],
+      [editorState, t],
+    );
+
+    return (
+      <Modal
+        afterOpenChange={handleOpenChange}
+        okButtonProps={{ loading: isSaving }}
+        okText={t('header.newNoteDialog.save')}
+        onCancel={handleClose}
+        onOk={handleSave}
+        open={open}
+        title={isEditMode ? t('header.newNoteDialog.editTitle') : t('header.newNoteDialog.title')}
+        width={800}
+      >
+        <Flexbox gap={0}>
+          <ChatInputActionBar
+            left={<ChatInputActions items={toolbarItems} />}
+            style={{
+              background: theme.colorFillQuaternary,
+              borderTopLeftRadius: 8,
+              borderTopRightRadius: 8,
+            }}
+          />
+          <Flexbox padding={16}>
+            <Editor
+              // autoFocus
+              className={editorClassName}
+              content={''}
+              editor={editor}
+              plugins={[
+                ReactListPlugin,
+                ReactCodePlugin,
+                ReactCodeblockPlugin,
+                ReactHRPlugin,
+                ReactLinkHighlightPlugin,
+                ReactTablePlugin,
+                ReactMathPlugin,
+              ]}
+              style={{
+                minHeight: 400,
+              }}
+              type={'text'}
+            />
+          </Flexbox>
+        </Flexbox>
+      </Modal>
+    );
+  },
+);
+
+export default NoteEditorModal;