@lobehub/lobehub 2.0.0-next.233 → 2.0.0-next.234

package/src/features/ResourceManager/components/Editor/index.tsx

@@ -1,22 +1,107 @@
 'use client';
 
+import { BUILTIN_AGENT_SLUGS } from '@lobechat/builtin-agents';
 import { ActionIcon, Flexbox } from '@lobehub/ui';
-import { cssVar } from 'antd-style';
-import { ArrowLeftIcon } from 'lucide-react';
-import { memo } from 'react';
+import { Modal } from 'antd';
+import { cssVar, useTheme } from 'antd-style';
+import { ArrowLeftIcon, BotMessageSquareIcon, DownloadIcon, InfoIcon } from 'lucide-react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import FileDetailComponent from '@/app/[variants]/(main)/resource/features/FileDetail';
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
+import Loading from '@/components/Loading/BrandTextLoading';
 import NavHeader from '@/features/NavHeader';
+import PageAgentProvider from '@/features/PageEditor/PageAgentProvider';
+import ToggleRightPanelButton from '@/features/RightPanel/ToggleRightPanelButton';
+import { useAgentStore } from '@/store/agent';
+import { builtinAgentSelectors } from '@/store/agent/selectors';
 import { fileManagerSelectors, useFileStore } from '@/store/file';
+import { downloadFile } from '@/utils/client/downloadFile';
 
-import Breadcrumb from '../Explorer/Header/Breadcrumb';
 import FileContent from './FileContent';
+import FileCopilot from './FileCopilot';
 
 interface FileEditorProps {
   onBack?: () => void;
 }
 
+const FileEditorCanvas = memo<FileEditorProps>(({ onBack }) => {
+  const { t } = useTranslation(['common', 'file']);
+  const theme = useTheme();
+  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
+
+  const currentViewItemId = useResourceManagerStore((s) => s.currentViewItemId);
+
+  const fileDetail = useFileStore(fileManagerSelectors.getFileById(currentViewItemId));
+
+  return (
+    <>
+      <Flexbox height={'100%'} horizontal width={'100%'}>
+        <Flexbox flex={1} height={'100%'}>
+          <NavHeader
+            left={
+              <Flexbox align={'center'} gap={12} horizontal style={{ minHeight: 32 }}>
+                <ActionIcon icon={ArrowLeftIcon} onClick={onBack} title={t('back')} />
+                <span
+                  style={{
+                    color: theme.colorText,
+                    fontSize: 14,
+                    fontWeight: 500,
+                  }}
+                >
+                  {fileDetail?.name}
+                </span>
+              </Flexbox>
+            }
+            right={
+              <Flexbox gap={8} horizontal>
+                <ToggleRightPanelButton icon={BotMessageSquareIcon} showActive={true} size={20} />
+                {fileDetail?.url && (
+                  <ActionIcon
+                    icon={DownloadIcon}
+                    onClick={() => {
+                      if (fileDetail?.url && fileDetail?.name) {
+                        downloadFile(fileDetail.url, fileDetail.name);
+                      }
+                    }}
+                    title={t('download', { ns: 'common' })}
+                  />
+                )}
+                <ActionIcon icon={InfoIcon} onClick={() => setIsDetailModalOpen(true)} />
+              </Flexbox>
+            }
+            style={{
+              borderBottom: `1px solid ${cssVar.colorBorderSecondary}`,
+            }}
+            styles={{
+              left: { padding: 0 },
+            }}
+          />
+          <Flexbox flex={1} style={{ overflow: 'hidden' }}>
+            <FileContent fileId={currentViewItemId} />
+          </Flexbox>
+        </Flexbox>
+        <FileCopilot />
+      </Flexbox>
+
+      <Modal
+        footer={null}
+        onCancel={() => setIsDetailModalOpen(false)}
+        open={isDetailModalOpen}
+        title={t('detail.basic.title', { ns: 'file' })}
+        width={400}
+      >
+        {fileDetail && (
+          <FileDetailComponent {...fileDetail} showDownloadButton={false} showTitle={false} />
+        )}
+      </Modal>
+    </>
+  );
+});
+
+FileEditorCanvas.displayName = 'FileEditorCanvas';
+
 /**
  * View or Edit a file
  *
@@ -24,38 +109,20 @@ interface FileEditorProps {
  * So we depend on context, not props.
  */
 const FileEditor = memo<FileEditorProps>(({ onBack }) => {
-  const { t } = useTranslation('common');
+  const useInitBuiltinAgent = useAgentStore((s) => s.useInitBuiltinAgent);
+  const pageAgentId = useAgentStore(builtinAgentSelectors.pageAgentId);
 
-  const [currentViewItemId, category] = useResourceManagerStore((s) => [
-    s.currentViewItemId,
-    s.category,
-  ]);
+  useInitBuiltinAgent(BUILTIN_AGENT_SLUGS.pageAgent);
 
-  const fileDetail = useFileStore(fileManagerSelectors.getFileById(currentViewItemId));
+  if (!pageAgentId) return <Loading debugId="FileEditor > PageAgent Init" />;
 
   return (
-    <Flexbox height={'100%'}>
-      <NavHeader
-        left={
-          <Flexbox align={'center'} gap={4} horizontal style={{ minHeight: 32 }}>
-            <ActionIcon icon={ArrowLeftIcon} onClick={onBack} title={t('back')} />
-            <Flexbox align={'center'} style={{ marginLeft: 8 }}>
-              <Breadcrumb category={category} fileName={fileDetail?.name} />
-            </Flexbox>
-          </Flexbox>
-        }
-        style={{
-          borderBottom: `1px solid ${cssVar.colorBorderSecondary}`,
-        }}
-        styles={{
-          left: { padding: 0 },
-        }}
-      />
-      <Flexbox flex={1} style={{ overflow: 'hidden' }}>
-        <FileContent fileId={currentViewItemId} />
-      </Flexbox>
-    </Flexbox>
+    <PageAgentProvider pageAgentId={pageAgentId}>
+      <FileEditorCanvas onBack={onBack} />
+    </PageAgentProvider>
   );
 });
 
+FileEditor.displayName = 'FileEditor';
+
 export default FileEditor;

package/src/features/ResourceManager/components/Explorer/ItemDropdown/useFileItemDropdown.tsx

@@ -56,8 +56,9 @@ export const useFileItemDropdown = ({
       s.useFetchKnowledgeBaseList,
     ]);
 
-  // Only fetch knowledge bases when dropdown is enabled (open)
-  // This prevents the expensive SWR call for all 20-25 visible items
+  // Fetch knowledge bases - SWR caches this across all dropdown instances
+  // Only the first call fetches from server, subsequent calls use cache
+  // The expensive menu computation is deferred until dropdown opens (menuItems is a function)
   const { data: knowledgeBases } = useFetchKnowledgeBaseList();
 
   const inKnowledgeBase = !!knowledgeBaseId;

package/src/features/ResourceManager/components/Explorer/ListView/ColumnResizeHandle.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { createStaticStyles, cssVar } from 'antd-style';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+
+const styles = createStaticStyles(({ css }) => ({
+  handle: css`
+    cursor: col-resize;
+    user-select: none;
+
+    position: absolute;
+    z-index: 1;
+    inset-block: 0 0;
+    inset-inline-end: 0;
+    transform: translateX(-4px);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 16px;
+
+    &::after {
+      content: '';
+
+      width: 1.5px;
+      height: calc(100% - 16px);
+      border-radius: 1px;
+
+      background-color: ${cssVar.colorBorder};
+
+      transition: all 0.2s;
+    }
+
+    &:hover::after {
+      width: 3px;
+      background-color: ${cssVar.colorPrimary};
+    }
+  `,
+  handleDragging: css`
+    &::after {
+      width: 3px !important;
+      background-color: ${cssVar.colorPrimary} !important;
+    }
+  `,
+}));
+
+interface ColumnResizeHandleProps {
+  column: 'name' | 'date' | 'size';
+  currentWidth: number;
+  maxWidth: number;
+  minWidth: number;
+  onResize: (width: number) => void;
+}
+
+const ColumnResizeHandle = memo<ColumnResizeHandleProps>(
+  ({ currentWidth, minWidth, maxWidth, onResize }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const startXRef = useRef(0);
+    const startWidthRef = useRef(0);
+
+    const handleMouseMove = useCallback(
+      (e: MouseEvent) => {
+        const delta = e.clientX - startXRef.current;
+        const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidthRef.current + delta));
+
+        // Update width in real-time during drag
+        onResize(newWidth);
+      },
+      [minWidth, maxWidth, onResize],
+    );
+
+    const handleMouseUp = useCallback(() => {
+      setIsDragging(false);
+    }, []);
+
+    const handleMouseDown = useCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        setIsDragging(true);
+        startXRef.current = e.clientX;
+        startWidthRef.current = currentWidth;
+      },
+      [currentWidth],
+    );
+
+    // Attach document-level event listeners when dragging
+    useEffect(() => {
+      if (isDragging) {
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+
+        // Disable text selection and lock cursor during drag
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = 'col-resize';
+
+        return () => {
+          document.removeEventListener('mousemove', handleMouseMove);
+          document.removeEventListener('mouseup', handleMouseUp);
+          document.body.style.userSelect = '';
+          document.body.style.cursor = '';
+        };
+      }
+    }, [isDragging, handleMouseMove, handleMouseUp]);
+
+    return (
+      <div
+        className={`${styles.handle} ${isDragging ? styles.handleDragging : ''}`}
+        onMouseDown={handleMouseDown}
+      />
+    );
+  },
+);
+
+ColumnResizeHandle.displayName = 'ColumnResizeHandle';
+
+export default ColumnResizeHandle;

package/src/features/ResourceManager/components/Explorer/ListView/ListItem/index.tsx

@@ -26,6 +26,7 @@ import DropdownMenu from '../../ItemDropdown/DropdownMenu';
 import { useFileItemDropdown } from '../../ItemDropdown/useFileItemDropdown';
 import ChunksBadge from './ChunkTag';
 
+// Initialize dayjs plugin once at module level
 dayjs.extend(relativeTime);
 
 export const FILE_DATE_WIDTH = 160;
@@ -35,6 +36,7 @@ const styles = createStaticStyles(({ css }) => {
   return {
     container: css`
       cursor: pointer;
+      min-width: 800px;
 
       &:hover {
         background: ${cssVar.colorFillTertiary};
@@ -83,7 +85,6 @@ const styles = createStaticStyles(({ css }) => {
       overflow: hidden;
       flex: 1;
       min-width: 0;
-      max-width: 600px;
     `,
     selected: css`
       background: ${cssVar.colorFillTertiary};
@@ -96,6 +97,11 @@ const styles = createStaticStyles(({ css }) => {
 });
 
 interface FileListItemProps extends FileListItemType {
+  columnWidths: {
+    date: number;
+    name: number;
+    size: number;
+  };
   index: number;
   onSelectedChange: (id: string, selected: boolean, shiftKey: boolean, index: number) => void;
   pendingRenameItemId?: string | null;
@@ -107,6 +113,7 @@ const FileListItem = memo<FileListItemProps>(
   ({
     size,
     chunkingError,
+    columnWidths,
     embeddingError,
     embeddingStatus,
     finishEmbedding,
@@ -242,7 +249,7 @@ const FileListItem = memo<FileListItemProps>(
       [createdAt],
     );
 
-    const handleRenameStart = () => {
+    const handleRenameStart = useCallback(() => {
       setIsRenaming(true);
       setRenamingValue(name);
       // Focus input after render
@@ -250,9 +257,9 @@ const FileListItem = memo<FileListItemProps>(
         inputRef.current?.focus();
         inputRef.current?.select();
       }, 0);
-    };
+    }, [name]);
 
-    const handleRenameConfirm = async () => {
+    const handleRenameConfirm = useCallback(async () => {
       if (!renamingValue.trim()) {
         message.error(t('FileManager.actions.renameError'));
         return;
@@ -271,12 +278,12 @@ const FileListItem = memo<FileListItemProps>(
         console.error('Rename error:', error);
         message.error(t('FileManager.actions.renameError'));
       }
-    };
+    }, [renamingValue, name, fileStoreState.renameFolder, id, message, t]);
 
-    const handleRenameCancel = () => {
+    const handleRenameCancel = useCallback(() => {
       setIsRenaming(false);
       setRenamingValue(name);
-    };
+    }, [name]);
 
     // Memoize click handler to prevent recreation on every render
     const handleItemClick = useCallback(() => {
@@ -357,29 +364,42 @@ const FileListItem = memo<FileListItemProps>(
           paddingInline={8}
           style={{
             borderBlockEnd: `1px solid ${cssVar.colorBorderSecondary}`,
+            userSelect: 'none',
           }}
         >
+          <Center
+            height={40}
+            onClick={(e) => {
+              e.stopPropagation();
+
+              onSelectedChange(id, !selected, e.shiftKey, index);
+            }}
+            onPointerDown={(e) => {
+              e.stopPropagation();
+              // Prevent text selection when shift-clicking for batch selection
+              if (e.shiftKey) {
+                e.preventDefault();
+              }
+            }}
+            style={{ paddingInline: 4 }}
+          >
+            <Checkbox checked={selected} />
+          </Center>
           <Flexbox
             align={'center'}
             className={styles.item}
             distribution={'space-between'}
-            flex={1}
             horizontal
             onClick={handleItemClick}
+            style={{
+              flexShrink: 0,
+              maxWidth: columnWidths.name,
+              minWidth: columnWidths.name,
+              paddingInline: 8,
+              width: columnWidths.name,
+            }}
           >
             <Flexbox align={'center'} className={styles.nameContainer} horizontal>
-              <Center
-                height={48}
-                onClick={(e) => {
-                  e.stopPropagation();
-
-                  onSelectedChange(id, !selected, e.shiftKey, index);
-                }}
-                onPointerDown={(e) => e.stopPropagation()}
-                style={{ paddingInline: 4 }}
-              >
-                <Checkbox checked={selected} />
-              </Center>
               <Flexbox
                 align={'center'}
                 justify={'center'}
@@ -479,10 +499,10 @@ const FileListItem = memo<FileListItemProps>(
           </Flexbox>
           {!isDragging && (
             <>
-              <Flexbox className={styles.item} width={FILE_DATE_WIDTH}>
+              <Flexbox className={styles.item} style={{ flexShrink: 0 }} width={columnWidths.date}>
                 {displayTime}
               </Flexbox>
-              <Flexbox className={styles.item} width={FILE_SIZE_WIDTH}>
+              <Flexbox className={styles.item} style={{ flexShrink: 0 }} width={columnWidths.size}>
                 {isFolder || isPage ? '-' : formatSize(size)}
               </Flexbox>
             </>
@@ -491,6 +511,31 @@ const FileListItem = memo<FileListItemProps>(
       </ContextMenuTrigger>
     );
   },
+  // Custom comparison function to prevent unnecessary re-renders
+  (prevProps, nextProps) => {
+    // Only re-render if these critical props change
+    return (
+      prevProps.id === nextProps.id &&
+      prevProps.name === nextProps.name &&
+      prevProps.selected === nextProps.selected &&
+      prevProps.chunkingStatus === nextProps.chunkingStatus &&
+      prevProps.embeddingStatus === nextProps.embeddingStatus &&
+      prevProps.chunkCount === nextProps.chunkCount &&
+      prevProps.chunkingError === nextProps.chunkingError &&
+      prevProps.embeddingError === nextProps.embeddingError &&
+      prevProps.finishEmbedding === nextProps.finishEmbedding &&
+      prevProps.pendingRenameItemId === nextProps.pendingRenameItemId &&
+      prevProps.size === nextProps.size &&
+      prevProps.createdAt === nextProps.createdAt &&
+      prevProps.fileType === nextProps.fileType &&
+      prevProps.sourceType === nextProps.sourceType &&
+      prevProps.slug === nextProps.slug &&
+      prevProps.url === nextProps.url &&
+      prevProps.columnWidths.name === nextProps.columnWidths.name &&
+      prevProps.columnWidths.date === nextProps.columnWidths.date &&
+      prevProps.columnWidths.size === nextProps.columnWidths.size
+    );
+  },
 );
 
 FileListItem.displayName = 'FileListItem';

package/src/features/ResourceManager/components/Explorer/ListView/Skeleton.tsx

@@ -1,20 +1,55 @@
-import { Flexbox, Skeleton } from '@lobehub/ui';
+import { Center, Checkbox, Flexbox, Skeleton } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
 
 import { FILE_DATE_WIDTH, FILE_SIZE_WIDTH } from './ListItem';
 
-const ListViewSkeleton = () => (
-  <Flexbox style={{ marginInline: 16 }}>
-    {Array.from({ length: 4 }).map((_, index) => (
-      <Flexbox align={'center'} distribution={'space-between'} height={48} horizontal key={index}>
-        <Flexbox align={'center'} flex={1} gap={8} horizontal paddingInline={8}>
+interface ListViewSkeletonProps {
+  columnWidths?: {
+    date: number;
+    name: number;
+    size: number;
+  };
+  count?: number;
+}
+
+const ListViewSkeleton = ({
+  columnWidths = { date: FILE_DATE_WIDTH, name: 400, size: FILE_SIZE_WIDTH },
+  count = 3,
+}: ListViewSkeletonProps) => (
+  <Flexbox>
+    {Array.from({ length: count }).map((_, index) => (
+      <Flexbox
+        align={'center'}
+        height={48}
+        horizontal
+        key={index}
+        paddingInline={8}
+        style={{
+          borderBlockEnd: `1px solid ${cssVar.colorBorderSecondary}`,
+        }}
+      >
+        <Center height={40} style={{ paddingInline: 4 }}>
+          <Checkbox disabled />
+        </Center>
+        <Flexbox
+          align={'center'}
+          horizontal
+          paddingInline={8}
+          style={{
+            flexShrink: 0,
+            maxWidth: columnWidths.name,
+            minWidth: columnWidths.name,
+            width: columnWidths.name,
+          }}
+        >
           <Skeleton.Avatar active shape={'square'} size={24} style={{ marginInline: 8 }} />
-          <Skeleton.Button active style={{ height: 16, width: 300 }} />
+          <Skeleton.Button active style={{ height: 16, width: '60%' }} />
         </Flexbox>
-        <Flexbox paddingInline={24} width={FILE_DATE_WIDTH}>
-          <Skeleton.Button active style={{ height: 16 }} />
+        <Flexbox paddingInline={24} style={{ flexShrink: 0 }} width={columnWidths.date}>
+          <Skeleton.Button active style={{ height: 16, width: '80%' }} />
         </Flexbox>
-        <Flexbox paddingInline={24} width={FILE_SIZE_WIDTH}>
-          <Skeleton.Button active style={{ height: 16 }} />
+        <Flexbox paddingInline={24} style={{ flexShrink: 0 }} width={columnWidths.size}>
+          <Skeleton.Button active style={{ height: 16, width: '60%' }} />
         </Flexbox>
       </Flexbox>
     ))}