@lobehub/lobehub 2.0.0-next.53 → 2.0.0-next.55

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

@@ -0,0 +1,163 @@
+'use client';
+
+import { Input, Popover } from 'antd';
+import { createStyles } from 'antd-style';
+import dynamic from 'next/dynamic';
+import React, { memo, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { globalGeneralSelectors } from '@/store/global/selectors';
+
+const EmojiPicker = dynamic(() => import('@lobehub/ui/es/EmojiPicker'), { ssr: false });
+
+const useStyles = createStyles(({ css }) => ({
+  input: css`
+    flex: 1;
+  `,
+  inputGroup: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  `,
+  popoverContent: css`
+    width: 320px;
+  `,
+}));
+
+interface RenamePopoverProps {
+  children: React.ReactElement;
+  currentEmoji?: string;
+  currentTitle: string;
+  onConfirm: (title: string, emoji?: string) => void;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+}
+
+const RenamePopover = memo<RenamePopoverProps>(
+  ({ children, currentTitle, currentEmoji, onConfirm, open, onOpenChange }) => {
+    const { t } = useTranslation(['file', 'editor']);
+    const { styles } = useStyles();
+    const locale = useGlobalStore(globalGeneralSelectors.currentLanguage);
+
+    const [title, setTitle] = useState(currentTitle);
+    const [emoji, setEmoji] = useState<string | undefined>(currentEmoji);
+    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const inputRef = useRef<any>(null);
+    const isInteractingWithEmojiPicker = useRef(false);
+
+    // Reset state when popover opens
+    const handleOpenChange = (nextOpen: boolean) => {
+      if (nextOpen) {
+        setTitle(currentTitle);
+        setEmoji(currentEmoji);
+        setShowEmojiPicker(false);
+      }
+      onOpenChange(nextOpen);
+    };
+
+    // Select all text when popover opens
+    useEffect(() => {
+      if (open && inputRef.current?.input) {
+        // Use a slightly longer timeout to ensure the input is fully rendered
+        const timer = setTimeout(() => {
+          inputRef.current.input.select();
+        }, 150);
+        return () => clearTimeout(timer);
+      }
+    }, [open]);
+
+    const handleTitleConfirm = () => {
+      if (title.trim() && title.trim() !== currentTitle) {
+        onConfirm(title.trim(), emoji);
+      }
+      onOpenChange(false);
+    };
+
+    const handleBlur = () => {
+      // Use setTimeout to check if we're interacting with emoji picker
+      setTimeout(() => {
+        // Don't close if emoji picker interaction is in progress
+        if (isInteractingWithEmojiPicker.current) {
+          return;
+        }
+
+        // Save title on blur if it changed
+        if (title.trim() && title.trim() !== currentTitle) {
+          onConfirm(title.trim(), emoji);
+        }
+        onOpenChange(false);
+      }, 150);
+    };
+
+    const content = (
+      <div className={styles.popoverContent}>
+        <div className={styles.inputGroup}>
+          <EmojiPicker
+            allowDelete
+            locale={locale}
+            onChange={(newEmoji) => {
+              setEmoji(newEmoji);
+              setShowEmojiPicker(false);
+              isInteractingWithEmojiPicker.current = false;
+              // Update emoji immediately
+              onConfirm(title, newEmoji);
+              // Refocus input after emoji selection
+              setTimeout(() => inputRef.current?.focus(), 100);
+            }}
+            onDelete={() => {
+              setEmoji(undefined);
+              setShowEmojiPicker(false);
+              isInteractingWithEmojiPicker.current = false;
+              // Update to remove emoji immediately
+              onConfirm(title, undefined);
+              // Refocus input after emoji deletion
+              setTimeout(() => inputRef.current?.focus(), 100);
+            }}
+            onOpenChange={(isOpen) => {
+              setShowEmojiPicker(isOpen);
+              isInteractingWithEmojiPicker.current = isOpen;
+            }}
+            open={showEmojiPicker}
+            size={32}
+            style={{
+              fontSize: 32,
+            }}
+            title={t('documentEditor.chooseIcon')}
+            value={emoji}
+          />
+          <Input
+            autoFocus
+            className={styles.input}
+            onBlur={handleBlur}
+            onChange={(e) => setTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleTitleConfirm();
+              } else if (e.key === 'Escape') {
+                onOpenChange(false);
+              }
+            }}
+            placeholder={t('documentEditor.titlePlaceholder')}
+            ref={inputRef}
+            value={title}
+          />
+        </div>
+      </div>
+    );
+
+    return (
+      <Popover
+        content={content}
+        onOpenChange={handleOpenChange}
+        open={open}
+        placement="bottom"
+        trigger={[]}
+      >
+        {children}
+      </Popover>
+    );
+  },
+);
+
+export default RenamePopover;

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

@@ -0,0 +1,318 @@
+'use client';
+
+import { ActionIcon, SearchBar, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { PlusIcon } from 'lucide-react';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+import { Virtuoso } from 'react-virtuoso';
+
+import { useFileStore } from '@/store/file';
+import { DocumentSourceType, LobeDocument } from '@/types/document';
+
+import DocumentEditor from './DocumentEditor';
+import DocumentEditorPlaceholder from './DocumentEditorPlaceholder';
+import DocumentListItem from './DocumentListItem';
+import DocumentListSkeleton from './DocumentListSkeleton';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    display: flex;
+    width: 100%;
+    height: 100%;
+  `,
+  documentList: css`
+    overflow-y: auto;
+    flex: 1;
+    padding-block: 4px;
+  `,
+  editorPanel: css`
+    overflow: hidden;
+    flex: 1;
+    background: ${token.colorBgContainer};
+  `,
+  header: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    padding-block: ${token.paddingXXS}px;
+    padding-inline: ${token.paddingXS}px;
+    border-block-end: 1px solid ${token.colorBorderSecondary};
+
+    background: ${token.colorBgContainer};
+  `,
+  listPanel: css`
+    display: flex;
+    flex-direction: column;
+
+    width: 280px;
+    min-width: 280px;
+    border-inline-end: 1px solid ${token.colorBorderSecondary};
+
+    background: ${token.colorBgContainer};
+  `,
+}));
+
+interface DocumentExplorerProps {
+  documentId?: string;
+  knowledgeBaseId?: string;
+}
+
+const updateUrl = (docId: string | null) => {
+  const newPath = docId ? `/knowledge/${docId}` : '/knowledge';
+  window.history.replaceState({}, '', newPath);
+};
+
+/**
+ * View, edit and create documents.
+ */
+const DocumentExplorer = memo<DocumentExplorerProps>(({ knowledgeBaseId, documentId }) => {
+  const { t } = useTranslation('file');
+  const { styles } = useStyles();
+
+  const [selectedDocumentId, setSelectedDocumentId] = useState<string | null>(null);
+  const [isCreatingNew, setIsCreatingNew] = useState(false);
+  const [searchKeywords, setSearchKeywords] = useState<string>('');
+  const [renamingDocumentId, setRenamingDocumentId] = useState<string | null>(null);
+
+  const fetchDocuments = useFileStore((s) => s.fetchDocuments);
+  const getOptimisticDocuments = useFileStore((s) => s.getOptimisticDocuments);
+  const isDocumentListLoading = useFileStore((s) => s.isDocumentListLoading);
+  const createDocument = useFileStore((s) => s.createDocument);
+  const createOptimisticDocument = useFileStore((s) => s.createOptimisticDocument);
+  const replaceTempDocumentWithReal = useFileStore((s) => s.replaceTempDocumentWithReal);
+  const updateDocumentOptimistically = useFileStore((s) => s.updateDocumentOptimistically);
+  // Subscribe to localDocumentMap and documents to trigger re-render when documents are updated
+  useFileStore((s) => s.localDocumentMap);
+  useFileStore((s) => s.documents);
+
+  // Fetch documents on mount
+  useEffect(() => {
+    fetchDocuments();
+  }, [fetchDocuments]);
+
+  // If documentId is provided, automatically open that document
+  useEffect(() => {
+    if (documentId) {
+      setSelectedDocumentId(documentId);
+      setIsCreatingNew(false);
+    }
+  }, [documentId]);
+
+  // Get optimistic documents (merged local + server)
+  // Filter by knowledgeBaseId if provided
+  // Since the API call already filters by knowledgeBaseId, we trust that data
+  // But we also need to check local optimistic updates
+  // Re-compute when localDocumentMap changes to ensure list updates when documents are edited
+  const documents = getOptimisticDocuments();
+
+  // Filter documents based on search keywords and sort by creation date (newest first)
+  const filteredDocuments = useMemo(() => {
+    let result = documents;
+
+    // Filter by search keywords
+    if (searchKeywords.trim()) {
+      const lowerKeywords = searchKeywords.toLowerCase();
+      result = documents.filter((document) => {
+        const content = document.content?.toLowerCase() || '';
+        const title = document.title?.toLowerCase() || '';
+        return content.includes(lowerKeywords) || title.includes(lowerKeywords);
+      });
+    }
+
+    // Sort by creation date (newest first)
+    return result.sort((a, b) => {
+      const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
+      const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
+      return dateB - dateA;
+    });
+  }, [documents, searchKeywords]);
+
+  const handleDocumentSelect = (documentId: string) => {
+    if (selectedDocumentId === documentId) {
+      // Deselect if clicking the same document
+      setSelectedDocumentId(null);
+      updateUrl(null);
+    } else {
+      setSelectedDocumentId(documentId);
+      updateUrl(documentId);
+    }
+    setIsCreatingNew(false);
+  };
+
+  const handleNewDocument = async () => {
+    const untitledTitle = t('documentList.untitled');
+
+    // Create optimistic document immediately for instant UX
+    const tempDocumentId = createOptimisticDocument(untitledTitle);
+    setSelectedDocumentId(tempDocumentId);
+    setIsCreatingNew(true);
+
+    try {
+      // Create real document in background
+      const newDoc = await createDocument({
+        content: '',
+        knowledgeBaseId,
+        title: untitledTitle,
+      });
+
+      // Convert DocumentItem to EditorDocument
+      const realDocument: LobeDocument = {
+        content: newDoc.content || '',
+        createdAt: newDoc.createdAt ? new Date(newDoc.createdAt) : new Date(),
+        editorData:
+          typeof newDoc.editorData === 'string'
+            ? JSON.parse(newDoc.editorData)
+            : newDoc.editorData || null,
+        fileType: 'custom/document',
+        filename: newDoc.title || untitledTitle,
+        id: newDoc.id,
+        metadata: newDoc.metadata || {},
+        source: 'document',
+        sourceType: DocumentSourceType.EDITOR,
+        title: newDoc.title || untitledTitle,
+        totalCharCount: newDoc.content?.length || 0,
+        totalLineCount: 0,
+        updatedAt: newDoc.updatedAt ? new Date(newDoc.updatedAt) : new Date(),
+      };
+
+      // Replace optimistic document with real document (smooth UX, no flicker)
+      replaceTempDocumentWithReal(tempDocumentId, realDocument);
+
+      // Update selected document ID to real ID and update URL
+      setSelectedDocumentId(newDoc.id);
+      setIsCreatingNew(false);
+      updateUrl(newDoc.id);
+    } catch (error) {
+      console.error('Failed to create document:', error);
+      // On error, remove the optimistic document and deselect
+      useFileStore.getState().removeTempDocument(tempDocumentId);
+      setSelectedDocumentId(null);
+      setIsCreatingNew(false);
+    }
+  };
+
+  const handleDocumentIdChange = (newId: string) => {
+    // When a temp document gets a real ID, update the selected document ID
+    setSelectedDocumentId(newId);
+    setIsCreatingNew(false);
+    updateUrl(newId);
+  };
+
+  const handleRenameOpenChange = (documentId: string, open: boolean) => {
+    setRenamingDocumentId(open ? documentId : null);
+  };
+
+  const handleRenameConfirm = async (documentId: string, title: string, emoji?: string) => {
+    try {
+      await updateDocumentOptimistically(documentId, {
+        metadata: {
+          emoji,
+        },
+        title,
+      });
+    } catch (error) {
+      console.error('Failed to rename document:', error);
+    } finally {
+      setRenamingDocumentId(null);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      {/* Left Panel - Documents List */}
+      <div className={styles.listPanel}>
+        <div className={styles.header}>
+          <SearchBar
+            allowClear
+            onChange={(e) => setSearchKeywords(e.target.value)}
+            placeholder={t('searchDocumentPlaceholder')}
+            style={{ flex: 1 }}
+            value={searchKeywords}
+            variant={'borderless'}
+          />
+          <ActionIcon
+            icon={PlusIcon}
+            onClick={handleNewDocument}
+            title={t('header.newDocumentButton')}
+          />
+        </div>
+        <div className={styles.documentList}>
+          {isDocumentListLoading ? (
+            <DocumentListSkeleton />
+          ) : filteredDocuments.length === 0 ? (
+            <div style={{ color: 'var(--lobe-text-secondary)', padding: 24, textAlign: 'center' }}>
+              {searchKeywords.trim() ? t('documentList.noResults') : t('documentList.empty')}
+            </div>
+          ) : (
+            <Virtuoso
+              components={{
+                Footer: () => (
+                  <Center style={{ paddingBlock: 16 }}>
+                    <Text style={{ fontSize: 12 }} type={'secondary'}>
+                      {t('documentList.documentCount', { count: filteredDocuments.length })}
+                    </Text>
+                  </Center>
+                ),
+              }}
+              data={filteredDocuments}
+              itemContent={(_index, document) => {
+                const isSelected = selectedDocumentId === document.id;
+                const isRenaming = renamingDocumentId === document.id;
+                return (
+                  <DocumentListItem
+                    document={document}
+                    isRenaming={isRenaming}
+                    isSelected={isSelected}
+                    key={document.id}
+                    onDelete={() => {
+                      if (selectedDocumentId === document.id) {
+                        setSelectedDocumentId(null);
+                        setIsCreatingNew(false);
+                        updateUrl(null);
+                      }
+                    }}
+                    onRenameConfirm={handleRenameConfirm}
+                    onRenameOpenChange={handleRenameOpenChange}
+                    onSelect={handleDocumentSelect}
+                    untitledText={t('documentList.untitled')}
+                  />
+                );
+              }}
+              style={{ height: '100%' }}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Right Panel - Editor */}
+      <div className={styles.editorPanel}>
+        {selectedDocumentId || isCreatingNew ? (
+          <DocumentEditor
+            documentId={selectedDocumentId || undefined}
+            knowledgeBaseId={knowledgeBaseId}
+            onDelete={() => {
+              setSelectedDocumentId(null);
+              setIsCreatingNew(false);
+              updateUrl(null);
+            }}
+            onDocumentIdChange={handleDocumentIdChange}
+          />
+        ) : (
+          <DocumentEditorPlaceholder
+            knowledgeBaseId={knowledgeBaseId}
+            onCreateNewNote={handleNewDocument}
+            onNoteCreated={(documentId) => {
+              setSelectedDocumentId(documentId);
+              setIsCreatingNew(false);
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+});
+
+export default DocumentExplorer;

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

@@ -1,12 +1,12 @@
-import { Button, Tooltip } from '@lobehub/ui';
+import { Button, Icon, Tooltip } from '@lobehub/ui';
 import { Checkbox } from 'antd';
 import { createStyles } from 'antd-style';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { isNull } from 'lodash-es';
-import { FileBoxIcon } from 'lucide-react';
+import { FileBoxIcon, FileText } from 'lucide-react';
 import { rgba } from 'polished';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 import { useSearchParams } from 'react-router-dom';
@@ -22,6 +22,15 @@ import DropdownMenu from './DropdownMenu';
 
 dayjs.extend(relativeTime);
 
+// 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;
+};
+
 export const FILE_DATE_WIDTH = 160;
 export const FILE_SIZE_WIDTH = 140;
 
@@ -33,9 +42,8 @@ const useStyles = createStyles(({ css, token, cx, isDarkMode }) => {
     checkbox: hover,
     container: css`
       cursor: pointer;
-      margin-inline: 24px;
+      margin-inline: 16px;
       border-block-end: 1px solid ${isDarkMode ? token.colorSplit : rgba(token.colorSplit, 0.06)};
-      border-radius: ${token.borderRadius}px;
 
       &:hover {
         background: ${token.colorFillTertiary};
@@ -101,8 +109,11 @@ const FileRenderItem = memo<FileRenderItemProps>(
     onSelectedChange,
     knowledgeBaseId,
     index,
+    content,
+    metadata,
+    sourceType,
   }) => {
-    const { t } = useTranslation('components');
+    const { t } = useTranslation(['components', 'file']);
     const { styles, cx } = useStyles();
     const [, setSearchParams] = useSearchParams();
     const [isCreatingFileParseTask, parseFiles] = useFileStore((s) => [
@@ -111,6 +122,18 @@ const FileRenderItem = memo<FileRenderItemProps>(
     ]);
 
     const isSupportedForChunking = !isChunkingUnsupported(fileType);
+    const isNote = sourceType === 'document' || fileType === 'custom/document';
+
+    // Extract title and emoji for notes
+    const displayTitle = useMemo(() => {
+      if (isNote && content) {
+        const extractedTitle = extractTitle(content);
+        return extractedTitle || name || t('file:documentList.untitled');
+      }
+      return name;
+    }, [isNote, content, name, t]);
+
+    const emoji = isNote ? metadata?.emoji : null;
 
     const displayTime =
       dayjs().diff(dayjs(createdAt), 'd') < 7
@@ -121,7 +144,7 @@ const FileRenderItem = memo<FileRenderItemProps>(
       <Flexbox
         align={'center'}
         className={cx(styles.container, selected && styles.selected)}
-        height={64}
+        height={48}
         horizontal
         paddingInline={8}
       >
@@ -158,8 +181,24 @@ const FileRenderItem = memo<FileRenderItemProps>(
                 style={{ borderRadius: '50%' }}
               />
             </Center>
-            <FileIcon fileName={name} fileType={fileType} />
-            <span className={styles.name}>{name}</span>
+            <Flexbox
+              align={'center'}
+              justify={'center'}
+              style={{ fontSize: 24, marginInline: 8, width: 24 }}
+            >
+              {isNote ? (
+                emoji ? (
+                  <span style={{ fontSize: 24 }}>{emoji}</span>
+                ) : (
+                  <Center height={24} width={24}>
+                    <Icon icon={FileText} size={24} />
+                  </Center>
+                )
+              ) : (
+                <FileIcon fileName={name} fileType={fileType} size={24} />
+              )}
+            </Flexbox>
+            <span className={styles.name}>{displayTitle}</span>
           </Flexbox>
           <Flexbox
             align={'center'}