@lobehub/lobehub 2.0.0-next.267 → 2.0.0-next.268

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

@@ -0,0 +1,396 @@
+'use client';
+
+import { Flexbox } from '@lobehub/ui';
+import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+import { VList } from 'virtua';
+
+import { useFolderPath } from '@/app/[variants]/(main)/resource/features/hooks/useFolderPath';
+import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
+import { fileService } from '@/services/file';
+import { useFileStore } from '@/store/file';
+import type { ResourceQueryParams } from '@/types/resource';
+
+import { HierarchyNode } from './HierarchyNode';
+import TreeSkeleton from './TreeSkeleton';
+import {
+  TREE_REFRESH_EVENT,
+  getTreeState,
+  resourceItemToTreeItem,
+  sortTreeItems,
+} from './treeState';
+import type { TreeItem } from './types';
+
+// Export for external use
+export { clearTreeFolderCache } from './treeState';
+
+/**
+ * As a sidebar along with the Explorer
+ */
+const LibraryHierarchy = memo(() => {
+  const { currentFolderSlug } = useFolderPath();
+
+  const [useFetchKnowledgeItems, useFetchFolderBreadcrumb, useFetchKnowledgeItem] = useFileStore(
+    (s) => [s.useFetchKnowledgeItems, s.useFetchFolderBreadcrumb, s.useFetchKnowledgeItem],
+  );
+
+  const [resourceList, resourceQueryParams] = useFileStore((s) => [s.resourceList, s.queryParams]);
+
+  const [libraryId, currentViewItemId] = useResourceManagerStore((s) => [
+    s.libraryId,
+    s.currentViewItemId,
+  ]);
+
+  // Force re-render when tree state changes
+  const [updateKey, forceUpdate] = useReducer((x) => x + 1, 0);
+
+  // Get the persisted state for this knowledge base
+  const state = useMemo(() => getTreeState(libraryId || ''), [libraryId]);
+  const { expandedFolders, folderChildrenCache, loadingFolders } = state;
+
+  // Fetch breadcrumb for current folder
+  const { data: folderBreadcrumb } = useFetchFolderBreadcrumb(currentFolderSlug);
+
+  // Fetch current file when viewing a file
+  const { data: currentFile } = useFetchKnowledgeItem(currentViewItemId);
+
+  // Track parent folder key for file selection - stored in a ref to avoid hook order issues
+  const parentFolderKeyRef = useRef<string | null>(null);
+
+  // Fetch root level data using SWR
+  const { data: rootData, isLoading } = useFetchKnowledgeItems({
+    knowledgeBaseId: libraryId,
+    parentId: null,
+    showFilesInKnowledgeBase: false,
+  });
+
+  const isExplorerCacheActiveForTree = useMemo(() => {
+    if (!libraryId) return false;
+    if (!resourceQueryParams) return false;
+
+    // We intentionally ignore search per requirement: tree always shows full hierarchy
+    if (resourceQueryParams.q) return false;
+
+    return resourceQueryParams.libraryId === libraryId;
+  }, [libraryId, resourceQueryParams]);
+
+  const explorerParentKey = useMemo(() => {
+    if (!isExplorerCacheActiveForTree) return null;
+    return (resourceQueryParams as ResourceQueryParams).parentId ?? null;
+  }, [isExplorerCacheActiveForTree, resourceQueryParams]);
+
+  const explorerChildren = useMemo(() => {
+    if (!isExplorerCacheActiveForTree) return [];
+    return sortTreeItems(resourceList.map(resourceItemToTreeItem));
+  }, [isExplorerCacheActiveForTree, resourceList]);
+
+  const isSameTreeItems = useCallback((a: TreeItem[] | undefined, b: TreeItem[]) => {
+    if (!a) return false;
+    if (a.length !== b.length) return false;
+    // Compare minimal stable identity for change detection
+    let i = 0;
+    for (const item of a) {
+      if (item.id !== b[i]?.id) return false;
+      i += 1;
+    }
+    return true;
+  }, []);
+
+  // Convert root data to tree items
+  const items: TreeItem[] = useMemo(() => {
+    // If Explorer has loaded root for this library, use its cache to ensure identical state
+    if (isExplorerCacheActiveForTree && explorerParentKey === null) return explorerChildren;
+    if (!rootData) return [];
+
+    const mappedItems: TreeItem[] = rootData.map((item) => ({
+      fileType: item.fileType,
+      id: item.id,
+      isFolder: item.fileType === 'custom/folder',
+      name: item.name,
+      slug: item.slug,
+      sourceType: item.sourceType,
+      url: item.url,
+    }));
+
+    return sortTreeItems(mappedItems);
+  }, [explorerChildren, explorerParentKey, rootData, updateKey]);
+
+  // Hydrate tree cache for the folder Explorer has loaded (non-root only).
+  // This ensures the tree and explorer render identical children for that folder.
+  useEffect(() => {
+    if (!isExplorerCacheActiveForTree) return;
+    if (!explorerParentKey) return; // root handled via `items` memo above
+
+    const existing = state.folderChildrenCache.get(explorerParentKey);
+    if (isSameTreeItems(existing, explorerChildren)) return;
+
+    state.folderChildrenCache.set(explorerParentKey, explorerChildren);
+    state.loadedFolders.add(explorerParentKey);
+    forceUpdate();
+    // NOTE: folderChildrenCache / loadedFolders are mutated in-place
+  }, [
+    explorerChildren,
+    explorerParentKey,
+    isExplorerCacheActiveForTree,
+    isSameTreeItems,
+    state,
+    forceUpdate,
+  ]);
+
+  const visibleNodes = useMemo(() => {
+    interface VisibleNode {
+      item: TreeItem;
+      key: string;
+      level: number;
+    }
+
+    const result: VisibleNode[] = [];
+
+    const walk = (nodes: TreeItem[], level: number) => {
+      for (const node of nodes) {
+        const key = node.slug || node.id;
+
+        result.push({ item: node, key, level });
+
+        if (!node.isFolder) continue;
+        if (!expandedFolders.has(key)) continue;
+
+        const children = folderChildrenCache.get(key);
+        if (!children || children.length === 0) continue;
+
+        walk(children, level + 1);
+      }
+    };
+
+    walk(items, 0);
+
+    return result;
+    // NOTE: expandedFolders / folderChildrenCache are mutated in-place, so rely on updateKey for recompute
+  }, [items, expandedFolders, folderChildrenCache, updateKey]);
+
+  const handleLoadFolder = useCallback(
+    async (folderId: string) => {
+      // Set loading state
+      state.loadingFolders.add(folderId);
+      forceUpdate();
+
+      try {
+        // Prefer Explorer's cache when it matches this folder (keeps tree + explorer identical)
+        if (isExplorerCacheActiveForTree && explorerParentKey === folderId) {
+          state.folderChildrenCache.set(folderId, explorerChildren);
+          state.loadedFolders.add(folderId);
+          return;
+        }
+
+        // Use SWR mutate to trigger a fetch that will be cached and shared with FileExplorer
+        const { mutate: swrMutate } = await import('swr');
+        const response = await swrMutate(
+          [
+            'useFetchKnowledgeItems',
+            {
+              knowledgeBaseId: libraryId,
+              parentId: folderId,
+              showFilesInKnowledgeBase: false,
+            },
+          ],
+          () =>
+            fileService.getKnowledgeItems({
+              knowledgeBaseId: libraryId,
+              parentId: folderId,
+              showFilesInKnowledgeBase: false,
+            }),
+          {
+            revalidate: false, // Don't revalidate immediately after mutation
+          },
+        );
+
+        if (!response || !response.items) {
+          console.error('Failed to load folder contents: no data returned');
+          return;
+        }
+
+        const childItems: TreeItem[] = response.items.map((item) => ({
+          fileType: item.fileType,
+          id: item.id,
+          isFolder: item.fileType === 'custom/folder',
+          name: item.name,
+          slug: item.slug,
+          sourceType: item.sourceType,
+          url: item.url,
+        }));
+
+        // Sort children: folders first, then files
+        const sortedChildren = sortTreeItems(childItems);
+
+        // Store children in cache
+        state.folderChildrenCache.set(folderId, sortedChildren);
+        state.loadedFolders.add(folderId);
+      } catch (error) {
+        console.error('Failed to load folder contents:', error);
+      } finally {
+        // Clear loading state
+        state.loadingFolders.delete(folderId);
+        // Trigger re-render
+        forceUpdate();
+      }
+    },
+    [
+      explorerChildren,
+      explorerParentKey,
+      forceUpdate,
+      isExplorerCacheActiveForTree,
+      libraryId,
+      state,
+    ],
+  );
+
+  const handleToggleFolder = useCallback(
+    (folderId: string) => {
+      if (state.expandedFolders.has(folderId)) {
+        state.expandedFolders.delete(folderId);
+      } else {
+        state.expandedFolders.add(folderId);
+      }
+      // Trigger re-render
+      forceUpdate();
+    },
+    [state, forceUpdate],
+  );
+
+  // Reset parent folder key when switching libraries
+  useEffect(() => {
+    parentFolderKeyRef.current = null;
+  }, [libraryId]);
+
+  // Listen for external tree refresh events (triggered when cache is cleared)
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleTreeRefresh = (event: Event) => {
+      const detail = (event as CustomEvent<{ knowledgeBaseId?: string }>).detail;
+      if (detail?.knowledgeBaseId && libraryId && detail.knowledgeBaseId !== libraryId) return;
+      forceUpdate();
+    };
+
+    window.addEventListener(TREE_REFRESH_EVENT, handleTreeRefresh);
+    return () => {
+      window.removeEventListener(TREE_REFRESH_EVENT, handleTreeRefresh);
+    };
+  }, [libraryId, forceUpdate]);
+
+  // Auto-expand folders when navigating to a folder in Explorer
+  useEffect(() => {
+    if (!folderBreadcrumb || folderBreadcrumb.length === 0) return;
+
+    let hasChanges = false;
+
+    // Expand all folders in the breadcrumb path
+    for (const crumb of folderBreadcrumb) {
+      const key = crumb.slug || crumb.id;
+      if (!state.expandedFolders.has(key)) {
+        state.expandedFolders.add(key);
+        hasChanges = true;
+      }
+
+      // Load folder contents if not already loaded
+      if (!state.loadedFolders.has(key) && !state.loadingFolders.has(key)) {
+        handleLoadFolder(key);
+      }
+    }
+
+    if (hasChanges) {
+      forceUpdate();
+    }
+  }, [folderBreadcrumb, state, forceUpdate, handleLoadFolder]);
+
+  // Auto-expand parent folder when viewing a file
+  useEffect(() => {
+    if (!currentFile || !currentViewItemId) {
+      parentFolderKeyRef.current = null;
+      return;
+    }
+
+    // If the file has a parent folder, expand the path to it
+    if (currentFile.parentId) {
+      // Fetch the parent folder's breadcrumb to get the full path
+      const fetchParentPath = async () => {
+        try {
+          const parentBreadcrumb = await fileService.getFolderBreadcrumb(currentFile.parentId!);
+
+          if (!parentBreadcrumb || parentBreadcrumb.length === 0) return;
+
+          let hasChanges = false;
+
+          // The last item in breadcrumb is the immediate parent folder
+          const parentFolder = parentBreadcrumb.at(-1)!;
+          const parentKey = parentFolder.slug || parentFolder.id;
+          parentFolderKeyRef.current = parentKey;
+
+          // Expand all folders in the parent's breadcrumb path
+          for (const crumb of parentBreadcrumb) {
+            const key = crumb.slug || crumb.id;
+            if (!state.expandedFolders.has(key)) {
+              state.expandedFolders.add(key);
+              hasChanges = true;
+            }
+
+            // Load folder contents if not already loaded
+            if (!state.loadedFolders.has(key) && !state.loadingFolders.has(key)) {
+              handleLoadFolder(key);
+            }
+          }
+
+          if (hasChanges) {
+            forceUpdate();
+          }
+        } catch (error) {
+          console.error('Failed to fetch parent folder breadcrumb:', error);
+        }
+      };
+
+      fetchParentPath();
+    } else {
+      parentFolderKeyRef.current = null;
+    }
+  }, [currentFile, currentViewItemId, state, forceUpdate, handleLoadFolder]);
+
+  if (isLoading) {
+    return <TreeSkeleton />;
+  }
+
+  // Determine which item should be highlighted
+  // If viewing a file, highlight its parent folder
+  // Otherwise, highlight the current folder
+  const selectedKey =
+    currentViewItemId && parentFolderKeyRef.current
+      ? parentFolderKeyRef.current
+      : currentFolderSlug;
+
+  return (
+    <Flexbox paddingInline={4} style={{ height: '100%' }}>
+      <VList
+        bufferSize={typeof window !== 'undefined' ? window.innerHeight : 0}
+        style={{ height: '100%' }}
+      >
+        {visibleNodes.map(({ item, key, level }) => (
+          <div key={key} style={{ paddingBottom: 2 }}>
+            <HierarchyNode
+              expandedFolders={expandedFolders}
+              folderChildrenCache={folderChildrenCache}
+              item={item}
+              level={level}
+              loadingFolders={loadingFolders}
+              onLoadFolder={handleLoadFolder}
+              onToggleFolder={handleToggleFolder}
+              selectedKey={selectedKey}
+              updateKey={updateKey}
+            />
+          </div>
+        ))}
+      </VList>
+    </Flexbox>
+  );
+});
+
+LibraryHierarchy.displayName = 'FileTree';
+
+export default LibraryHierarchy;

package/src/features/ResourceManager/components/LibraryHierarchy/styles.ts

@@ -0,0 +1,19 @@
+import { createStaticStyles } from 'antd-style';
+
+export const styles = createStaticStyles(({ css, cssVar }) => ({
+  dragging: css`
+    will-change: transform;
+    opacity: 0.5;
+  `,
+  fileItemDragOver: css`
+    color: ${cssVar.colorBgElevated} !important;
+    background-color: ${cssVar.colorText} !important;
+
+    * {
+      color: ${cssVar.colorBgElevated} !important;
+    }
+  `,
+  treeItem: css`
+    cursor: pointer;
+  `,
+}));

package/src/features/ResourceManager/components/LibraryHierarchy/treeState.ts

@@ -0,0 +1,178 @@
+import { fileService } from '@/services/file';
+import { useFileStore } from '@/store/file';
+import type { ResourceItem } from '@/types/resource';
+
+import type { TreeItem } from './types';
+
+export const sortTreeItems = <T extends TreeItem>(items: T[]): T[] => {
+  return [...items].sort((a, b) => {
+    // Folders first
+    if (a.isFolder && !b.isFolder) return -1;
+    if (!a.isFolder && b.isFolder) return 1;
+    // Then alphabetically by name
+    return a.name.localeCompare(b.name);
+  });
+};
+
+export const resourceItemToTreeItem = (item: ResourceItem): TreeItem => {
+  return {
+    fileType: item.fileType,
+    id: item.id,
+    isFolder: item.fileType === 'custom/folder',
+    name: item.name,
+    slug: item.slug,
+    sourceType: item.sourceType,
+    url: item.url || '',
+  };
+};
+
+// Module-level state to persist expansion across re-renders
+const treeState = new Map<
+  string,
+  {
+    expandedFolders: Set<string>;
+    folderChildrenCache: Map<string, TreeItem[]>;
+    loadedFolders: Set<string>;
+    loadingFolders: Set<string>;
+  }
+>();
+
+export const TREE_REFRESH_EVENT = 'resource-tree-refresh';
+
+export const emitTreeRefresh = (knowledgeBaseId: string) => {
+  if (typeof window === 'undefined') return;
+  window.dispatchEvent(
+    new CustomEvent(TREE_REFRESH_EVENT, {
+      detail: { knowledgeBaseId },
+    }),
+  );
+};
+
+export const getTreeState = (knowledgeBaseId: string) => {
+  if (!treeState.has(knowledgeBaseId)) {
+    treeState.set(knowledgeBaseId, {
+      expandedFolders: new Set(),
+      folderChildrenCache: new Map(),
+      loadedFolders: new Set(),
+      loadingFolders: new Set(),
+    });
+  }
+  return treeState.get(knowledgeBaseId)!;
+};
+
+/**
+ * Clear and reload all expanded folders
+ * This should be called along with file store's refreshFileList()
+ * Simpler approach: reload all expanded folders to avoid ID vs slug issues
+ */
+export const clearTreeFolderCache = async (knowledgeBaseId: string) => {
+  const state = treeState.get(knowledgeBaseId);
+  if (!state) return;
+
+  const { resourceList } = useFileStore.getState();
+
+  const resolveParentId = (key: string | null | undefined) => {
+    if (!key) return null;
+    // Prefer id match
+    const byId = resourceList.find(
+      (item) => item.knowledgeBaseId === knowledgeBaseId && item.id === key,
+    );
+    if (byId) return byId.id;
+    // Fallback to slug match
+    const bySlug = resourceList.find(
+      (item) => item.knowledgeBaseId === knowledgeBaseId && item.slug === key,
+    );
+    return bySlug?.id ?? key;
+  };
+
+  const buildChildrenFromStore = (parentKey: string | null) => {
+    const parentId = resolveParentId(parentKey);
+    const items = resourceList
+      .filter(
+        (item) =>
+          item.knowledgeBaseId === knowledgeBaseId &&
+          (item.parentId ?? null) === (parentId ?? null),
+      )
+      .map(resourceItemToTreeItem);
+
+    return sortTreeItems(items);
+  };
+
+  // Get list of all currently expanded folders before clearing
+  const expandedFoldersList = Array.from(state.expandedFolders);
+
+  // Clear all caches
+  state.folderChildrenCache.clear();
+  state.loadedFolders.clear();
+
+  // Reload each expanded folder
+  for (const folderKey of expandedFoldersList) {
+    // Prefer local store (explorer data) to avoid stale remote state
+    const localChildren = buildChildrenFromStore(folderKey);
+    if (localChildren.length > 0) {
+      state.folderChildrenCache.set(folderKey, localChildren);
+      state.loadedFolders.add(folderKey);
+      continue;
+    }
+
+    // Fallback to remote fetch if store has no data (e.g., initial load)
+    try {
+      const response = await fileService.getKnowledgeItems({
+        knowledgeBaseId,
+        parentId: folderKey,
+        showFilesInKnowledgeBase: false,
+      });
+
+      if (response?.items) {
+        const childItems = response.items.map((item) => ({
+          fileType: item.fileType,
+          id: item.id,
+          isFolder: item.fileType === 'custom/folder',
+          name: item.name,
+          slug: item.slug,
+          sourceType: item.sourceType,
+          url: item.url,
+        }));
+
+        // Sort children: folders first, then files
+        const sortedChildren = childItems.sort((a, b) => {
+          if (a.isFolder && !b.isFolder) return -1;
+          if (!a.isFolder && b.isFolder) return 1;
+          return a.name.localeCompare(b.name);
+        });
+
+        state.folderChildrenCache.set(folderKey, sortedChildren);
+        state.loadedFolders.add(folderKey);
+      }
+    } catch (error) {
+      console.error(`Failed to reload folder ${folderKey}:`, error);
+    }
+  }
+
+  // Revalidate SWR caches for root and expanded folders to keep list and tree in sync
+  try {
+    const { mutate } = await import('swr');
+    const revalidateFolder = (parentId: string | null) =>
+      mutate(
+        [
+          'useFetchKnowledgeItems',
+          {
+            knowledgeBaseId,
+            parentId,
+            showFilesInKnowledgeBase: false,
+          },
+        ],
+        undefined,
+        { revalidate: true },
+      );
+
+    await Promise.all([
+      revalidateFolder(null),
+      ...expandedFoldersList.map((folderKey) => revalidateFolder(folderKey)),
+    ]);
+  } catch (error) {
+    console.error('Failed to revalidate tree SWR cache:', error);
+  }
+
+  emitTreeRefresh(knowledgeBaseId);
+};

package/src/features/ResourceManager/components/LibraryHierarchy/types.ts

@@ -0,0 +1,10 @@
+export interface TreeItem {
+  children?: TreeItem[];
+  fileType: string;
+  id: string;
+  isFolder: boolean;
+  name: string;
+  slug?: string | null;
+  sourceType?: string;
+  url: string;
+}

package/src/features/ResourceManager/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { BRANDING_NAME } from '@lobechat/business-const';
 import { Flexbox } from '@lobehub/ui';
 import { createStyles, cssVar } from 'antd-style';
 import dynamic from 'next/dynamic';
@@ -91,6 +92,8 @@ const ResourceManager = memo(() => {
       prev.delete('file');
       return prev;
     });
+    // Reset document title to default
+    document.title = BRANDING_NAME;
   };
 
   return (

package/src/layout/GlobalProvider/GroupWizardProvider.tsx

@@ -9,17 +9,8 @@ const ChatGroupWizard = lazy(() =>
 
 interface GroupWizardCallbacks {
   onCancel?: () => void;
-  onCreateCustom?: (
-    selectedAgents: string[],
-    hostConfig?: { model?: string; provider?: string },
-    enableSupervisor?: boolean,
-  ) => Promise<void>;
-  onCreateFromTemplate?: (
-    templateId: string,
-    hostConfig?: { model?: string; provider?: string },
-    enableSupervisor?: boolean,
-    selectedMemberTitles?: string[],
-  ) => Promise<void>;
+  onCreateCustom?: (selectedAgents: string[]) => Promise<void>;
+  onCreateFromTemplate?: (templateId: string, selectedMemberTitles?: string[]) => Promise<void>;
 }
 
 interface GroupWizardContextValue {
@@ -56,32 +47,18 @@ const GroupWizardProviderInner = memo<GroupWizardProviderProps>(({ children }) =
     setIsLoading(false);
   };
 
-  const handleCreateCustom = async (
-    selectedAgents: string[],
-    hostConfig?: { model?: string; provider?: string },
-    enableSupervisor?: boolean,
-  ) => {
+  const handleCreateCustom = async (selectedAgents: string[]) => {
     if (callbacks.onCreateCustom) {
-      await callbacks.onCreateCustom(selectedAgents, hostConfig, enableSupervisor);
+      await callbacks.onCreateCustom(selectedAgents);
       closeGroupWizard();
     }
   };
 
-  const handleCreateFromTemplate = async (
-    templateId: string,
-    hostConfig?: { model?: string; provider?: string },
-    enableSupervisor?: boolean,
-    selectedMemberTitles?: string[],
-  ) => {
+  const handleCreateFromTemplate = async (templateId: string, selectedMemberTitles?: string[]) => {
     if (callbacks.onCreateFromTemplate) {
       setIsLoading(true);
       try {
-        await callbacks.onCreateFromTemplate(
-          templateId,
-          hostConfig,
-          enableSupervisor,
-          selectedMemberTitles,
-        );
+        await callbacks.onCreateFromTemplate(templateId, selectedMemberTitles);
         closeGroupWizard();
       } finally {
         setIsLoading(false);

package/src/locales/default/auth.ts

@@ -194,7 +194,7 @@ export default {
   'profile.usernameRule': 'Username can only contain letters, numbers, or underscores',
   'profile.usernameUpdateFailed': 'Failed to update username, please try again later',
   'signin.subtitle': 'Sign up or log in to your {{appName}} account',
-  'signin.title': 'For Agents collaboration',
+  'signin.title': 'Where Agents Collaborate',
   'signout': 'Log Out',
   'signup': 'Sign Up',
   'stats.aiheatmaps': 'Activity Index',

package/src/locales/default/file.ts

@@ -20,6 +20,7 @@ export default {
   'header.actions.connect': 'Connect...',
   'header.actions.createFolderError': 'Failed to create folder',
   'header.actions.creatingFolder': 'Creating folder...',
+  'header.actions.deleteLibrary': 'Delete Library',
   'header.actions.gitignore.apply': 'Apply Rules',
   'header.actions.gitignore.cancel': 'Ignore Rules',
   'header.actions.gitignore.content':
@@ -118,6 +119,7 @@ export default {
   'preview.downloadFile': 'Download File',
   'preview.unsupportedFileAndContact':
     'This file format is not currently supported for online preview. If you have a request for previewing, feel free to <1>contact us</1>.',
+  'resource': 'Resource',
   'searchFilePlaceholder': 'Search Files',
   'searchPagePlaceholder': 'Search Pages',
   'tab.all': 'All',