@lobehub/lobehub 2.0.0-next.255 → 2.0.0-next.257

package/src/store/page/slices/list/action.ts

@@ -0,0 +1,206 @@
+import type { SWRResponse } from 'swr';
+import { type StateCreator } from 'zustand/vanilla';
+
+import { useClientDataSWRWithSync } from '@/libs/swr';
+import { documentService } from '@/services/document';
+import { useGlobalStore } from '@/store/global';
+import { type LobeDocument } from '@/types/document';
+import { setNamespace } from '@/utils/storeDebug';
+
+import { type PageQueryFilter } from '../../initialState';
+import { type PageStore } from '../../store';
+
+const n = setNamespace('page/list');
+
+const ALLOWED_PAGE_SOURCE_TYPES = new Set(['editor', 'file', 'api']);
+const ALLOWED_PAGE_FILE_TYPES = new Set(['custom/document', 'application/pdf']);
+
+/**
+ * Check if a page should be displayed in the page list
+ */
+const isAllowedPage = (page: { fileType: string; sourceType: string }) => {
+  return (
+    ALLOWED_PAGE_SOURCE_TYPES.has(page.sourceType) && ALLOWED_PAGE_FILE_TYPES.has(page.fileType)
+  );
+};
+
+export interface ListAction {
+  /**
+   * Fetch documents from the server with pagination
+   */
+  fetchDocuments: () => Promise<void>;
+  /**
+   * Load more documents (next page)
+   */
+  loadMoreDocuments: () => Promise<void>;
+  /**
+   * Refresh document list (re-fetch from server)
+   */
+  refreshDocuments: () => Promise<void>;
+  /**
+   * Set search keywords
+   */
+  setSearchKeywords: (keywords: string) => void;
+  /**
+   * Toggle filter to show only pages not in any library
+   */
+  setShowOnlyPagesNotInLibrary: (show: boolean) => void;
+  /**
+   * SWR hook to fetch documents list with caching and auto-sync to store
+   */
+  useFetchDocuments: () => SWRResponse<LobeDocument[]>;
+}
+
+export const createListSlice: StateCreator<
+  PageStore,
+  [['zustand/devtools', never]],
+  [],
+  ListAction
+> = (set, get) => ({
+  fetchDocuments: async () => {
+    try {
+      const pageSize = useGlobalStore.getState().status.pagePageSize || 20;
+      const queryFilters: PageQueryFilter = {
+        fileTypes: Array.from(ALLOWED_PAGE_FILE_TYPES),
+        sourceTypes: Array.from(ALLOWED_PAGE_SOURCE_TYPES),
+      };
+
+      const result = await documentService.queryDocuments({
+        current: 0,
+        pageSize,
+        ...queryFilters,
+      });
+
+      const documents = result.items.filter(isAllowedPage).map((doc) => ({
+        ...doc,
+        filename: doc.filename ?? doc.title ?? 'Untitled',
+      })) as LobeDocument[];
+
+      const hasMore = result.items.length >= pageSize;
+
+      // Use internal dispatch to set documents
+      get().internal_dispatchDocuments({ documents, type: 'setDocuments' });
+
+      set(
+        {
+          currentPage: 0,
+          documentsTotal: result.total,
+          hasMoreDocuments: hasMore,
+          queryFilter: queryFilters,
+        },
+        false,
+        n('fetchDocuments/success'),
+      );
+    } catch (error) {
+      console.error('Failed to fetch documents:', error);
+      throw error;
+    }
+  },
+
+  loadMoreDocuments: async () => {
+    const { currentPage, isLoadingMoreDocuments, hasMoreDocuments, queryFilter, documents } = get();
+
+    if (isLoadingMoreDocuments || !hasMoreDocuments || !documents) return;
+
+    const nextPage = currentPage + 1;
+
+    set({ isLoadingMoreDocuments: true }, false, n('loadMoreDocuments/start'));
+
+    try {
+      const pageSize = useGlobalStore.getState().status.pagePageSize || 20;
+      const queryParams = queryFilter
+        ? { current: nextPage, pageSize, ...queryFilter }
+        : { current: nextPage, pageSize };
+
+      const result = await documentService.queryDocuments(queryParams);
+
+      const newDocuments = result.items.filter(isAllowedPage).map((doc) => ({
+        ...doc,
+        filename: doc.filename ?? doc.title ?? 'Untitled',
+      })) as LobeDocument[];
+
+      const hasMore = result.items.length >= pageSize;
+
+      // Use internal dispatch to append documents
+      get().internal_dispatchDocuments({ documents: newDocuments, type: 'appendDocuments' });
+
+      set(
+        {
+          currentPage: nextPage,
+          documentsTotal: result.total,
+          hasMoreDocuments: hasMore,
+          isLoadingMoreDocuments: false,
+        },
+        false,
+        n('loadMoreDocuments/success'),
+      );
+    } catch (error) {
+      console.error('Failed to load more documents:', error);
+      set({ isLoadingMoreDocuments: false }, false, n('loadMoreDocuments/error'));
+    }
+  },
+
+  refreshDocuments: async () => {
+    await get().fetchDocuments();
+  },
+
+  setSearchKeywords: (keywords: string) => {
+    set({ searchKeywords: keywords }, false, n('setSearchKeywords'));
+  },
+
+  setShowOnlyPagesNotInLibrary: (show: boolean) => {
+    set({ showOnlyPagesNotInLibrary: show }, false, n('setShowOnlyPagesNotInLibrary'));
+  },
+
+  useFetchDocuments: () => {
+    return useClientDataSWRWithSync<LobeDocument[]>(
+      ['pageDocuments'],
+      async () => {
+        const pageSize = useGlobalStore.getState().status.pagePageSize || 20;
+        const queryFilters: PageQueryFilter = {
+          fileTypes: Array.from(ALLOWED_PAGE_FILE_TYPES),
+          sourceTypes: Array.from(ALLOWED_PAGE_SOURCE_TYPES),
+        };
+
+        const result = await documentService.queryDocuments({
+          current: 0,
+          pageSize,
+          ...queryFilters,
+        });
+
+        const documents = result.items.filter(isAllowedPage).map((doc) => ({
+          ...doc,
+          filename: doc.filename ?? doc.title ?? 'Untitled',
+        })) as LobeDocument[];
+
+        return documents;
+      },
+      {
+        onData: (documents) => {
+          if (!documents) return;
+
+          const pageSize = useGlobalStore.getState().status.pagePageSize || 20;
+          const hasMore = documents.length >= pageSize;
+
+          // Use internal dispatch to set documents
+          get().internal_dispatchDocuments({ documents, type: 'setDocuments' });
+
+          set(
+            {
+              currentPage: 0,
+              documentsTotal: documents.length,
+              hasMoreDocuments: hasMore,
+              queryFilter: {
+                fileTypes: Array.from(ALLOWED_PAGE_FILE_TYPES),
+                sourceTypes: Array.from(ALLOWED_PAGE_SOURCE_TYPES),
+              },
+            },
+            false,
+            n('useFetchDocuments/onData'),
+          );
+        },
+        revalidateOnFocus: true,
+      },
+    );
+  },
+});

package/src/store/page/slices/list/index.ts

@@ -0,0 +1,3 @@
+export { createListSlice, type ListAction } from './action';
+export { initialListState, type ListState } from './initialState';
+export { listSelectors } from './selectors';

package/src/store/page/slices/list/initialState.ts

@@ -0,0 +1,29 @@
+import { type LobeDocument } from '@/types/document';
+
+import { type PageQueryFilter } from '../../initialState';
+
+export interface ListState {
+  currentPage: number;
+  documents: LobeDocument[];
+  documentsTotal: number;
+  hasMoreDocuments: boolean;
+  isDocumentListLoading: boolean;
+  isLoadingMoreDocuments: boolean;
+  localPageMap: Map<string, LobeDocument>;
+  queryFilter?: PageQueryFilter;
+  searchKeywords: string;
+  showOnlyPagesNotInLibrary: boolean;
+}
+
+export const initialListState: ListState = {
+  currentPage: 0,
+  documents: [],
+  documentsTotal: 0,
+  hasMoreDocuments: false,
+  isDocumentListLoading: false,
+  isLoadingMoreDocuments: false,
+  localPageMap: new Map(),
+  queryFilter: undefined,
+  searchKeywords: '',
+  showOnlyPagesNotInLibrary: false,
+};

package/src/store/page/slices/list/selectors.ts

@@ -0,0 +1,90 @@
+import { useGlobalStore } from '@/store/global';
+import { type LobeDocument } from '@/types/document';
+
+import { type PageState } from '../../initialState';
+
+/**
+ * Check if documents are still loading (undefined means not yet loaded)
+ */
+const isDocumentsLoading = (s: PageState): boolean => s.documents === undefined;
+
+const getFilteredDocuments = (s: PageState): LobeDocument[] => {
+  const docs = s.documents ?? [];
+
+  const { searchKeywords, showOnlyPagesNotInLibrary } = s;
+
+  let result = docs;
+
+  // Filter out documents with sourceType='file'
+  result = result.filter((doc: LobeDocument) => doc.sourceType !== 'file');
+
+  // Filter by library membership
+  if (showOnlyPagesNotInLibrary) {
+    result = result.filter((doc: LobeDocument) => {
+      // Show only pages that are NOT in any library
+      // Pages in a library have metadata.knowledgeBaseId set
+      return !doc.metadata?.knowledgeBaseId;
+    });
+  }
+
+  // Filter by search keywords
+  if (searchKeywords.trim()) {
+    const lowerKeywords = searchKeywords.toLowerCase();
+    result = result.filter((doc: LobeDocument) => {
+      const content = doc.content?.toLowerCase() || '';
+      const title = doc.title?.toLowerCase() || '';
+      return content.includes(lowerKeywords) || title.includes(lowerKeywords);
+    });
+  }
+
+  // Sort by creation date (newest first)
+  return result.sort((a: LobeDocument, b: LobeDocument) => {
+    const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
+    const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
+    return dateB - dateA;
+  });
+};
+
+// Limited filtered documents for sidebar display
+const getFilteredDocumentsLimited = (s: PageState): LobeDocument[] => {
+  const pageSize = useGlobalStore.getState().status.pagePageSize || 20;
+  const allDocs = getFilteredDocuments(s);
+  return allDocs.slice(0, pageSize);
+};
+
+const getDocumentById = (docId: string | undefined) => (s: PageState) => {
+  if (!docId) return undefined;
+
+  // Find in documents array
+  return s.documents?.find((doc) => doc.id === docId);
+};
+
+const hasMoreDocuments = (s: PageState): boolean => s.hasMoreDocuments;
+
+const isLoadingMoreDocuments = (s: PageState): boolean => s.isLoadingMoreDocuments;
+
+const documentsTotal = (s: PageState): number => s.documentsTotal;
+
+// Check if filtered documents have more than displayed
+const hasMoreFilteredDocuments = (s: PageState): boolean => {
+  const pageSize = useGlobalStore.getState().status.pagePageSize || 20;
+  const allDocs = getFilteredDocuments(s);
+  return allDocs.length > pageSize;
+};
+
+// Get total count of filtered documents
+const filteredDocumentsCount = (s: PageState): number => {
+  return getFilteredDocuments(s).length;
+};
+
+export const listSelectors = {
+  documentsTotal,
+  filteredDocumentsCount,
+  getDocumentById,
+  getFilteredDocuments,
+  getFilteredDocumentsLimited,
+  hasMoreDocuments,
+  hasMoreFilteredDocuments,
+  isDocumentsLoading,
+  isLoadingMoreDocuments,
+};

package/src/store/page/slices/selection/action.ts

@@ -0,0 +1,67 @@
+import { type StateCreator } from 'zustand/vanilla';
+
+import { setNamespace } from '@/utils/storeDebug';
+
+import { type PageStore } from '../../store';
+
+const n = setNamespace('page/selection');
+
+export interface SelectionAction {
+  /**
+   * Close all pages drawer
+   */
+  closeAllPagesDrawer: () => void;
+  /**
+   * Open all pages drawer
+   */
+  openAllPagesDrawer: () => void;
+  /**
+   * Select a page (updates URL and state)
+   */
+  selectPage: (pageId: string) => void;
+  /**
+   * Set the ID of the page being renamed
+   */
+  setRenamingPageId: (pageId: string | null) => void;
+  /**
+   * Set selected page ID
+   */
+  setSelectedPageId: (pageId: string | null, shouldNavigate?: boolean) => void;
+}
+
+export const createSelectionSlice: StateCreator<
+  PageStore,
+  [['zustand/devtools', never]],
+  [],
+  SelectionAction
+> = (set, get) => ({
+  closeAllPagesDrawer: () => {
+    set({ allPagesDrawerOpen: false }, false, n('closeAllPagesDrawer'));
+  },
+
+  openAllPagesDrawer: () => {
+    set({ allPagesDrawerOpen: true }, false, n('openAllPagesDrawer'));
+  },
+
+  selectPage: (pageId: string) => {
+    const { selectedPageId } = get();
+
+    // Don't allow deselecting the current page
+    if (selectedPageId === pageId) return;
+
+    // Select and navigate
+    set({ isCreatingNew: false, selectedPageId: pageId }, false, n('selectPage'));
+    get().navigateToPage(pageId);
+  },
+
+  setRenamingPageId: (pageId: string | null) => {
+    set({ renamingPageId: pageId }, false, n('setRenamingPageId'));
+  },
+
+  setSelectedPageId: (pageId: string | null, shouldNavigate = true) => {
+    set({ selectedPageId: pageId }, false, n('setSelectedPageId'));
+    if (shouldNavigate) {
+      get().navigateToPage(pageId);
+    }
+  },
+});

package/src/store/page/slices/selection/index.ts

@@ -0,0 +1,2 @@
+export { createSelectionSlice, type SelectionAction } from './action';
+export { initialSelectionState, type SelectionState } from './initialState';

package/src/store/page/slices/selection/initialState.ts

@@ -0,0 +1,11 @@
+export interface SelectionState {
+  allPagesDrawerOpen: boolean;
+  renamingPageId: string | null;
+  selectedPageId: string | null;
+}
+
+export const initialSelectionState: SelectionState = {
+  allPagesDrawerOpen: false,
+  renamingPageId: null,
+  selectedPageId: null,
+};

package/src/store/page/store.ts

@@ -0,0 +1,29 @@
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
+import { type StateCreator } from 'zustand/vanilla';
+
+import { createDevtools } from '../middleware/createDevtools';
+import { type PageState, initialState } from './initialState';
+import { type CrudAction, createCrudSlice } from './slices/crud';
+import { type InternalAction, createInternalSlice } from './slices/internal';
+import { type ListAction, createListSlice } from './slices/list';
+import { type SelectionAction, createSelectionSlice } from './slices/selection';
+
+//  ===============  Aggregate createStoreFn ============ //
+
+export type PageStore = PageState & InternalAction & ListAction & SelectionAction & CrudAction;
+
+const createStore: StateCreator<PageStore, [['zustand/devtools', never]]> = (...parameters) => ({
+  ...initialState,
+  ...createInternalSlice(...parameters),
+  ...createListSlice(...parameters),
+  ...createSelectionSlice(...parameters),
+  ...createCrudSlice(...parameters),
+});
+
+//  ===============  Implement useStore ============ //
+const devtools = createDevtools('page');
+
+export const usePageStore = createWithEqualityFn<PageStore>()(devtools(createStore), shallow);
+
+export const getPageStoreState = () => usePageStore.getState();

package/src/store/tool/slices/lobehubSkillStore/selectors.ts

@@ -120,26 +120,16 @@ export const lobehubSkillStoreSelectors = {
    */
   metaList: (s: ToolStoreState) => {
     const servers = s.lobehubSkillServers || [];
-    const result = servers
+
+    return servers
       .filter((server) => server.status === LobehubSkillStatus.CONNECTED)
-      .map((server) => {
-        // Debug logging
-        console.log('[lobehubSkillStoreSelectors.metaList] server:', {
-          icon: server.icon,
-          identifier: server.identifier,
-          name: server.name,
-          status: server.status,
-        });
-        return {
-          identifier: server.identifier,
-          meta: {
-            avatar: server.icon || '🔗',
-            description: `LobeHub Skill: ${server.name}`,
-            title: server.name,
-          },
-        };
-      });
-    console.log('[lobehubSkillStoreSelectors.metaList] result:', result);
-    return result;
+      .map((server) => ({
+        identifier: server.identifier,
+        meta: {
+          avatar: server.icon || '🔗',
+          description: `LobeHub Skill: ${server.name}`,
+          title: server.name,
+        },
+      }));
   },
 };

package/src/utils/identifier.ts

@@ -4,7 +4,7 @@
  * @returns The standardized identifier.
  */
 
-const standardizeIdentifier = (identifier: string, prefix?: 'docs' | 'agt') => {
+export const standardizeIdentifier = (identifier: string, prefix?: 'docs' | 'agt') => {
   if (identifier.includes('_')) {
     return identifier.split('_')[1];
   } else if (prefix) {
@@ -14,4 +14,10 @@ const standardizeIdentifier = (identifier: string, prefix?: 'docs' | 'agt') => {
   return identifier;
 };
 
-export { standardizeIdentifier };
+export const getIdFromIdentifier = (identifier: string, prefix?: 'docs' | 'agt') => {
+  if (identifier.includes('_')) {
+    return identifier;
+  }
+
+  return `${prefix}_${identifier}`;
+};

package/src/features/PageEditor/Body/index.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import { Flexbox, Skeleton } from '@lobehub/ui';
-import { createStaticStyles } from 'antd-style';
-import { memo, useEffect, useState } from 'react';
-
-import EditorCanvas from '../EditorCanvas';
-import { usePageEditorStore } from '../store';
-import Title from './Title';
-
-const styles = createStaticStyles(({ css, cssVar }) => ({
-  loadingOverlay: css`
-    position: absolute;
-    z-index: 10;
-    inset: 0;
-
-    padding: 24px;
-
-    background: ${cssVar.colorBgContainer};
-  `,
-}));
-
-const Body = memo(() => {
-  const isLoadingContent = usePageEditorStore((s) => s.isLoadingContent);
-  const [showSkeleton, setShowSkeleton] = useState(false);
-
-  // Only show skeleton if loading takes more than 1 second
-  useEffect(() => {
-    // eslint-disable-next-line no-undef
-    let timer: NodeJS.Timeout;
-
-    if (isLoadingContent) {
-      timer = setTimeout(() => {
-        setShowSkeleton(true);
-      }, 1000);
-    } else {
-      setShowSkeleton(false);
-    }
-
-    return () => {
-      if (timer) clearTimeout(timer);
-    };
-  }, [isLoadingContent]);
-
-  return (
-    <Flexbox flex={1} style={{ overflowY: 'auto', position: 'relative' }}>
-      <Title />
-      <EditorCanvas />
-      {/* Show overlay immediately to hide old content */}
-      {isLoadingContent && (
-        <div className={styles.loadingOverlay}>
-          {/* Only show skeleton after 1 second */}
-          {showSkeleton && (
-            <Flexbox gap={16}>
-              <Skeleton.Title width="80%" />
-              <Skeleton.Title width="60%" />
-              <Skeleton.Title width="70%" />
-              <Skeleton.Title width="50%" />
-              <Skeleton.Title width="65%" />
-            </Flexbox>
-          )}
-        </div>
-      )}
-    </Flexbox>
-  );
-});
-
-export default Body;