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

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

@@ -15,8 +15,12 @@ import {
   useResourceManagerStore,
 } from '@/app/[variants]/(main)/resource/features/store';
 import { sortFileList } from '@/app/[variants]/(main)/resource/features/store/selectors';
+import { useGlobalStore } from '@/store/global';
+import { INITIAL_STATUS } from '@/store/global/initialState';
 
-import FileListItem, { FILE_DATE_WIDTH, FILE_SIZE_WIDTH } from './ListItem';
+import ColumnResizeHandle from './ColumnResizeHandle';
+import FileListItem from './ListItem';
+import ListViewSkeleton from './Skeleton';
 
 const log = debug('resource-manager:list-view');
 
@@ -31,18 +35,19 @@ const styles = createStaticStyles(({ css }) => ({
     outline-offset: -4px;
   `,
   header: css`
+    min-width: 800px;
     height: 40px;
     min-height: 40px;
     color: ${cssVar.colorTextDescription};
   `,
   headerItem: css`
-    padding-block: 0;
+    height: 100%;
+    padding-block: 6px;
     padding-inline: 0 24px;
   `,
-  loadingIndicator: css`
-    padding: 16px;
-    font-size: 14px;
-    color: ${cssVar.colorTextDescription};
+  scrollContainer: css`
+    overflow: auto hidden;
+    flex: 1;
   `,
 }));
 
@@ -72,6 +77,12 @@ const ListView = memo(() => {
     s.sortType,
   ]);
 
+  // Access column widths from Global store
+  const columnWidths = useGlobalStore(
+    (s) => s.status.resourceManagerColumnWidths || INITIAL_STATUS.resourceManagerColumnWidths,
+  );
+  const updateColumnWidth = useGlobalStore((s) => s.updateResourceManagerColumnWidth);
+
   const { t } = useTranslation(['components', 'file']);
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -88,7 +99,6 @@ const ListView = memo(() => {
   // Get current folder ID - either from breadcrumb or null for root
   const currentFolderId = folderBreadcrumb?.at(-1)?.id || null;
 
-  // Fetch data with SWR
   const { data: rawData } = useResourceManagerFetchKnowledgeItems({
     category,
     knowledgeBaseId: libraryId,
@@ -103,7 +113,11 @@ const ListView = memo(() => {
   // Handle selection change with shift-click support for range selection
   const handleSelectionChange = useCallback(
     (id: string, checked: boolean, shiftKey: boolean, clickedIndex: number) => {
-      if (shiftKey && lastSelectedIndex !== null && selectFileIds.length > 0 && data) {
+      // Always get the latest state from the store to avoid stale closure issues
+      const currentSelected = useResourceManagerStore.getState().selectedFileIds;
+
+      if (shiftKey && lastSelectedIndex !== null && data) {
+        // Shift-click: select range from lastSelectedIndex to current index
         const start = Math.min(lastSelectedIndex, clickedIndex);
         const end = Math.max(lastSelectedIndex, clickedIndex);
         const rangeIds = data
@@ -111,19 +125,21 @@ const ListView = memo(() => {
           .filter(Boolean)
           .map((item) => item.id);
 
-        const prevSet = new Set(selectFileIds);
+        // Merge with existing selection
+        const prevSet = new Set(currentSelected);
         rangeIds.forEach((rangeId) => prevSet.add(rangeId));
         setSelectedFileIds(Array.from(prevSet));
       } else {
+        // Regular click: toggle single item
         if (checked) {
-          setSelectedFileIds([...selectFileIds, id]);
+          setSelectedFileIds([...currentSelected, id]);
         } else {
-          setSelectedFileIds(selectFileIds.filter((item) => item !== id));
+          setSelectedFileIds(currentSelected.filter((item) => item !== id));
         }
       }
       setLastSelectedIndex(clickedIndex);
     },
-    [lastSelectedIndex, selectFileIds, data, setSelectedFileIds],
+    [lastSelectedIndex, data, setSelectedFileIds],
   );
 
   // Clean up invalid selections when data changes
@@ -254,81 +270,124 @@ const ListView = memo(() => {
     };
   }, [clearScrollTimers]);
 
+  // Memoize footer component to show skeleton loaders when loading more
+  const Footer = useCallback(() => {
+    if (!isLoadingMore || !fileListHasMore) return null;
+    return <ListViewSkeleton columnWidths={columnWidths} />;
+  }, [isLoadingMore, fileListHasMore, columnWidths]);
+
   return (
     <Flexbox height={'100%'}>
-      <Flexbox
-        align={'center'}
-        className={styles.header}
-        horizontal
-        paddingInline={8}
-        style={{
-          borderBlockEnd: `1px solid ${cssVar.colorBorderSecondary}`,
-          fontSize: 12,
-        }}
-      >
-        <Center height={40} style={{ paddingInline: 4 }}>
-          <Checkbox
-            checked={allSelected}
-            indeterminate={indeterminate}
-            onChange={handleSelectAll}
-          />
-        </Center>
-        <Flexbox className={styles.headerItem} flex={1} style={{ paddingInline: 8 }}>
-          {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>
-      <div
-        className={cx(styles.dropZone, isDropZoneActive && styles.dropZoneActive)}
-        data-drop-target-id={currentFolderId || undefined}
-        data-is-folder="true"
-        onDragLeave={handleDropZoneDragLeave}
-        onDragOver={(e) => {
-          handleDropZoneDragOver(e);
-          handleDragMove(e);
-        }}
-        onDrop={handleDropZoneDrop}
-        ref={containerRef}
-        style={{ flex: 1, overflow: 'hidden', position: 'relative' }}
-      >
-        <Virtuoso
-          data={data || []}
-          defaultItemHeight={48}
-          endReached={handleEndReached}
-          increaseViewportBy={{ bottom: 800, top: 1200 }}
-          initialItemCount={30}
-          itemContent={(index, item) => {
-            if (!item) return null;
-            return (
-              <FileListItem
-                index={index}
-                key={item.id}
-                onSelectedChange={handleSelectionChange}
-                pendingRenameItemId={pendingRenameItemId}
-                selected={selectFileIds.includes(item.id)}
-                {...item}
-              />
-            );
+      <div className={styles.scrollContainer}>
+        <Flexbox
+          align={'center'}
+          className={styles.header}
+          horizontal
+          paddingInline={8}
+          style={{
+            borderBlockEnd: `1px solid ${cssVar.colorBorderSecondary}`,
+            fontSize: 12,
           }}
-          overscan={48 * 5}
-          ref={virtuosoRef}
-          style={{ height: '100%' }}
-        />
-        {isLoadingMore && (
-          <Center
-            className={styles.loadingIndicator}
+        >
+          <Center height={40} style={{ paddingInline: 4 }}>
+            <Checkbox
+              checked={allSelected}
+              indeterminate={indeterminate}
+              onChange={handleSelectAll}
+            />
+          </Center>
+          <Flexbox
+            className={styles.headerItem}
+            justify={'center'}
             style={{
-              borderBlockStart: `1px solid ${cssVar.colorBorderSecondary}`,
+              flexShrink: 0,
+              maxWidth: columnWidths.name,
+              minWidth: columnWidths.name,
+              paddingInline: 8,
+              paddingInlineEnd: 16,
+              position: 'relative',
+              width: columnWidths.name,
             }}
           >
-            {t('loading', { defaultValue: 'Loading...', ns: 'file' })}
-          </Center>
-        )}
+            {t('FileManager.title.title')}
+            <ColumnResizeHandle
+              column="name"
+              currentWidth={columnWidths.name}
+              maxWidth={1200}
+              minWidth={200}
+              onResize={(width) => updateColumnWidth('name', width)}
+            />
+          </Flexbox>
+          <Flexbox
+            className={styles.headerItem}
+            justify={'center'}
+            style={{ flexShrink: 0, paddingInlineEnd: 16, position: 'relative' }}
+            width={columnWidths.date}
+          >
+            {t('FileManager.title.createdAt')}
+            <ColumnResizeHandle
+              column="date"
+              currentWidth={columnWidths.date}
+              maxWidth={300}
+              minWidth={120}
+              onResize={(width) => updateColumnWidth('date', width)}
+            />
+          </Flexbox>
+          <Flexbox
+            className={styles.headerItem}
+            justify={'center'}
+            style={{ flexShrink: 0, paddingInlineEnd: 16, position: 'relative' }}
+            width={columnWidths.size}
+          >
+            {t('FileManager.title.size')}
+            <ColumnResizeHandle
+              column="size"
+              currentWidth={columnWidths.size}
+              maxWidth={200}
+              minWidth={80}
+              onResize={(width) => updateColumnWidth('size', width)}
+            />
+          </Flexbox>
+        </Flexbox>
+        <div
+          className={cx(styles.dropZone, isDropZoneActive && styles.dropZoneActive)}
+          data-drop-target-id={currentFolderId || undefined}
+          data-is-folder="true"
+          onDragLeave={handleDropZoneDragLeave}
+          onDragOver={(e) => {
+            handleDropZoneDragOver(e);
+            handleDragMove(e);
+          }}
+          onDrop={handleDropZoneDrop}
+          ref={containerRef}
+          style={{ overflow: 'hidden', position: 'relative' }}
+        >
+          <Virtuoso
+            components={{ Footer }}
+            data={data || []}
+            defaultItemHeight={48}
+            endReached={handleEndReached}
+            increaseViewportBy={{ bottom: 800, top: 1200 }}
+            initialItemCount={30}
+            itemContent={(index, item) => {
+              if (!item) return null;
+              return (
+                <FileListItem
+                  columnWidths={columnWidths}
+                  index={index}
+                  key={item.id}
+                  onSelectedChange={handleSelectionChange}
+                  pendingRenameItemId={pendingRenameItemId}
+                  selected={selectFileIds.includes(item.id)}
+                  {...item}
+                />
+              );
+            }}
+            overscan={48 * 5}
+            ref={virtuosoRef}
+            style={{ height: 'calc(100vh - 100px)' }}
+          />
+        </div>
       </div>
     </Flexbox>
   );

package/src/features/ResourceManager/components/Explorer/ToolBar/SortDropdown.tsx

@@ -1,8 +1,9 @@
-import { type DropdownItem, DropdownMenu } from '@lobehub/ui';
+import { Dropdown } from '@lobehub/ui';
 import { ArrowDownAZ } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { type MenuProps } from '@/components/Menu';
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
 
 import ActionIconWithChevron from './ActionIconWithChevron';
@@ -21,23 +22,30 @@ const SortDropdown = memo(() => {
     [t],
   );
 
-  const menuItems: DropdownItem[] = sortOptions.map((option) => ({
-    key: option.key,
-    label: option.label,
-    onClick: () => setSorter(option.key as 'name' | 'createdAt' | 'size'),
-    style:
-      option.key === (sorter || 'createdAt')
-        ? { backgroundColor: 'var(--ant-control-item-bg-active)' }
-        : {},
-  }));
+  const menuItems: MenuProps['items'] = useMemo(
+    () =>
+      sortOptions.map((option) => ({
+        key: option.key,
+        label: option.label,
+        onClick: () => setSorter(option.key as 'name' | 'createdAt' | 'size'),
+      })),
+    [setSorter, sortOptions],
+  );
 
   const currentSortLabel =
     sortOptions.find((option) => option.key === sorter)?.label || t('FileManager.sort.dateAdded');
 
   return (
-    <DropdownMenu items={menuItems}>
+    <Dropdown
+      arrow={false}
+      menu={{
+        items: menuItems,
+        selectable: true,
+        selectedKeys: [sorter || 'createdAt'],
+      }}
+    >
       <ActionIconWithChevron icon={ArrowDownAZ} title={currentSortLabel} />
-    </DropdownMenu>
+    </Dropdown>
   );
 });
 

package/src/features/ResourceManager/components/Explorer/ToolBar/ViewSwitcher.tsx

@@ -1,8 +1,10 @@
-import { type DropdownItem, DropdownMenu, Icon } from '@lobehub/ui';
+import { Dropdown, Icon } from '@lobehub/ui';
 import { Grid3x3Icon, ListIcon } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { type MenuProps } from '@/components/Menu';
+
 import { useViewMode } from '../hooks/useViewMode';
 import ActionIconWithChevron from './ActionIconWithChevron';
 
@@ -18,30 +20,36 @@ const ViewSwitcher = memo(() => {
   const currentViewLabel =
     viewMode === 'list' ? t('FileManager.view.list') : t('FileManager.view.masonry');
 
-  const menuItems = useMemo<DropdownItem[]>(() => {
-    return [
+  const menuItems: MenuProps['items'] = useMemo(
+    () => [
       {
         icon: <Icon icon={ListIcon} />,
         key: 'list',
         label: t('FileManager.view.list'),
         onClick: () => setViewMode('list'),
-        style: viewMode === 'list' ? { backgroundColor: 'var(--ant-control-item-bg-active)' } : {},
       },
       {
         icon: <Icon icon={Grid3x3Icon} />,
         key: 'masonry',
         label: t('FileManager.view.masonry'),
         onClick: () => setViewMode('masonry'),
-        style:
-          viewMode === 'masonry' ? { backgroundColor: 'var(--ant-control-item-bg-active)' } : {},
       },
-    ];
-  }, [setViewMode, t, viewMode]);
+    ],
+    [setViewMode, t],
+  );
 
   return (
-    <DropdownMenu items={menuItems} placement="bottomRight">
+    <Dropdown
+      arrow={false}
+      menu={{
+        items: menuItems,
+        selectable: true,
+        selectedKeys: [viewMode],
+      }}
+      placement="bottomRight"
+    >
       <ActionIconWithChevron icon={currentViewIcon} title={currentViewLabel} />
-    </DropdownMenu>
+    </Dropdown>
   );
 });
 

package/src/features/ResourceManager/components/UploadDock/Item.tsx

@@ -1,14 +1,25 @@
-import { Flexbox, Text } from '@lobehub/ui';
+import { ActionIcon, Flexbox, Text } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
+import { XIcon } from 'lucide-react';
 import { type ReactNode, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import FileIcon from '@/components/FileIcon';
+import { useFileStore } from '@/store/file';
 import { type UploadFileItem } from '@/types/files/upload';
 import { formatSize, formatSpeed, formatTime } from '@/utils/format';
 
 const styles = createStaticStyles(({ css, cssVar }) => {
   return {
+    cancelButton: css`
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    `,
+    container: css`
+      &:hover .cancel-button {
+        opacity: 1;
+      }
+    `,
     progress: css`
       position: absolute;
       inset-block: 0 0;
@@ -33,9 +44,10 @@ const styles = createStaticStyles(({ css, cssVar }) => {
 
 type UploadItemProps = UploadFileItem;
 
-const UploadItem = memo<UploadItemProps>(({ file, status, uploadState }) => {
+const UploadItem = memo<UploadItemProps>(({ id, file, status, uploadState }) => {
   const { t } = useTranslation('file');
   const { type, name, size } = file;
+  const cancelUpload = useFileStore((s) => s.cancelUpload);
 
   const desc: ReactNode = useMemo(() => {
     switch (status) {
@@ -87,28 +99,48 @@ const UploadItem = memo<UploadItemProps>(({ file, status, uploadState }) => {
           </Text>
         );
       }
+      case 'cancelled': {
+        return (
+          <Text style={{ fontSize: 12 }} type={'warning'}>
+            {formatSize(size)} · {t('uploadDock.body.item.cancelled')}
+          </Text>
+        );
+      }
       default: {
         return '';
       }
     }
-  }, [status, uploadState]);
+  }, [status, uploadState, size, t]);
 
   return (
     <Flexbox
       align={'center'}
-      gap={4}
+      className={styles.container}
+      gap={12}
       horizontal
       key={name}
       paddingBlock={8}
       paddingInline={12}
       style={{ position: 'relative' }}
     >
-      <FileIcon fileName={name} fileType={type} />
-      <Flexbox style={{ overflow: 'hidden' }}>
+      <FileIcon fileName={name} fileType={type} size={36} />
+      <Flexbox flex={1} style={{ overflow: 'hidden' }}>
         <div className={styles.title}>{name}</div>
         {desc}
       </Flexbox>
 
+      {(status === 'uploading' || status === 'pending') && (
+        <ActionIcon
+          className={`${styles.cancelButton} cancel-button`}
+          icon={XIcon}
+          onClick={() => {
+            cancelUpload(id);
+          }}
+          size="small"
+          title={t('uploadDock.body.item.cancel')}
+        />
+      )}
+
       {status === 'uploading' && !!uploadState && (
         <div
           className={styles.progress}

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

@@ -3,6 +3,7 @@ import { ActionIcon, Center, Flexbox, Icon, Text } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { UploadIcon, XIcon } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -132,49 +133,69 @@ const UploadDock = memo(() => {
         )}
       </Flexbox>
 
-      {expand ? (
-        <Flexbox
-          justify={'space-between'}
-          style={{
-            background: `color-mix(in srgb, ${cssVar.colorBgLayout} 95%, white)`,
-            borderBottomLeftRadius: 8,
-            borderBottomRightRadius: 8,
-            height: 400,
-          }}
-        >
-          <Flexbox gap={8} paddingBlock={16} style={{ overflowY: 'scroll' }}>
-            {fileList.map((item) => (
-              <Item key={item.id} {...item} />
-            ))}
-          </Flexbox>
-          <Center style={{ height: 40, minHeight: 40 }}>
-            <Text
-              onClick={() => {
-                setExpand(false);
+      <AnimatePresence mode="wait">
+        {expand ? (
+          <motion.div
+            animate={{ height: 400, opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            initial={{ height: 0, opacity: 0 }}
+            key="expanded"
+            style={{ overflow: 'hidden' }}
+            transition={{ duration: 0.3, ease: 'easeInOut' }}
+          >
+            <Flexbox
+              justify={'space-between'}
+              style={{
+                background: cssVar.colorBgContainer,
+                borderBottomLeftRadius: 8,
+                borderBottomRightRadius: 8,
+                height: 400,
               }}
-              style={{ cursor: 'pointer' }}
-              type={'secondary'}
             >
-              {t('uploadDock.body.collapse')}
-            </Text>
-          </Center>
-        </Flexbox>
-      ) : (
-        overviewUploadingStatus !== 'pending' && (
-          <div
-            className={styles.progress}
-            style={{
-              borderColor:
-                overviewUploadingStatus === 'success'
-                  ? cssVar.colorSuccess
-                  : overviewUploadingStatus === 'error'
-                    ? cssVar.colorError
-                    : undefined,
-              insetInlineEnd: `${100 - totalUploadingProgress}%`,
-            }}
-          />
-        )
-      )}
+              <Flexbox gap={8} paddingBlock={8} style={{ overflowY: 'scroll' }}>
+                {fileList.map((item) => (
+                  <Item key={item.id} {...item} />
+                ))}
+              </Flexbox>
+              <Center style={{ height: 40, minHeight: 40 }}>
+                <Text
+                  onClick={() => {
+                    setExpand(false);
+                  }}
+                  style={{ cursor: 'pointer' }}
+                  type={'secondary'}
+                >
+                  {t('uploadDock.body.collapse')}
+                </Text>
+              </Center>
+            </Flexbox>
+          </motion.div>
+        ) : (
+          overviewUploadingStatus !== 'pending' && (
+            <motion.div
+              animate={{ opacity: 1, scaleY: 1 }}
+              exit={{ opacity: 0, scaleY: 0 }}
+              initial={{ opacity: 0, scaleY: 0 }}
+              key="collapsed"
+              style={{ originY: 0 }}
+              transition={{ duration: 0.2, ease: 'easeOut' }}
+            >
+              <div
+                className={styles.progress}
+                style={{
+                  borderColor:
+                    overviewUploadingStatus === 'success'
+                      ? cssVar.colorSuccess
+                      : overviewUploadingStatus === 'error'
+                        ? cssVar.colorError
+                        : undefined,
+                  insetInlineEnd: `${100 - totalUploadingProgress}%`,
+                }}
+              />
+            </motion.div>
+          )
+        )}
+      </AnimatePresence>
     </Flexbox>
   );
 });

package/src/features/ResourceManager/index.tsx

@@ -22,6 +22,7 @@ const useStyles = createStyles(({ css, token }) => {
   return {
     container: css`
       position: relative;
+      overflow: hidden;
     `,
     editorOverlay: css`
       position: absolute;

package/src/helpers/toolEngineering/index.test.ts

@@ -70,6 +70,9 @@ vi.mock('@/store/tool/selectors', () => ({
   klavisStoreSelectors: {
     klavisAsLobeTools: () => [],
   },
+  lobehubSkillStoreSelectors: {
+    lobehubSkillAsLobeTools: () => [],
+  },
 }));
 
 vi.mock('../isCanUseFC', () => ({

package/src/helpers/toolEngineering/index.ts

@@ -11,7 +11,11 @@ import type { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
 import { getAgentStoreState } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { getToolStoreState } from '@/store/tool';
-import { klavisStoreSelectors, pluginSelectors } from '@/store/tool/selectors';
+import {
+  klavisStoreSelectors,
+  lobehubSkillStoreSelectors,
+  pluginSelectors,
+} from '@/store/tool/selectors';
 
 import { getSearchConfig } from '../getSearchConfig';
 import { isCanUseFC } from '../isCanUseFC';
@@ -51,11 +55,18 @@ export const createToolsEngine = (config: ToolsEngineConfig = {}): ToolsEngine =
     .map((tool) => tool.manifest as LobeChatPluginManifest)
     .filter(Boolean);
 
+  // Get LobeHub Skill tool manifests
+  const lobehubSkillTools = lobehubSkillStoreSelectors.lobehubSkillAsLobeTools(toolStoreState);
+  const lobehubSkillManifests = lobehubSkillTools
+    .map((tool) => tool.manifest as LobeChatPluginManifest)
+    .filter(Boolean);
+
   // Combine all manifests
   const allManifests = [
     ...pluginManifests,
     ...builtinManifests,
     ...klavisManifests,
+    ...lobehubSkillManifests,
     ...additionalManifests,
   ];