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

package/src/store/chat/slices/portal/selectors.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest';
 
 import type { ChatStoreState } from '@/store/chat';
 
+import { PortalViewType } from './initialState';
 import { chatPortalSelectors } from './selectors';
 
 describe('chatDockSelectors', () => {
@@ -10,6 +11,7 @@ describe('chatDockSelectors', () => {
     const state = {
       showPortal: false,
       portalToolMessage: undefined,
+      portalStack: [],
       dbMessagesMap: {},
       activeAgentId: 'test-id',
       activeTopicId: undefined,
@@ -19,6 +21,82 @@ describe('chatDockSelectors', () => {
     return state;
   };
 
+  describe('currentView', () => {
+    it('should return null when stack is empty', () => {
+      expect(chatPortalSelectors.currentView(createState())).toBeNull();
+    });
+
+    it('should return the top view from stack', () => {
+      const state = createState({
+        portalStack: [
+          { type: PortalViewType.Notebook },
+          { type: PortalViewType.Document, documentId: 'doc-1' },
+        ],
+      });
+      expect(chatPortalSelectors.currentView(state)).toEqual({
+        type: PortalViewType.Document,
+        documentId: 'doc-1',
+      });
+    });
+  });
+
+  describe('currentViewType', () => {
+    it('should return null when stack is empty', () => {
+      expect(chatPortalSelectors.currentViewType(createState())).toBeNull();
+    });
+
+    it('should return the type of top view', () => {
+      const state = createState({
+        portalStack: [{ type: PortalViewType.Notebook }],
+      });
+      expect(chatPortalSelectors.currentViewType(state)).toBe(PortalViewType.Notebook);
+    });
+  });
+
+  describe('canGoBack', () => {
+    it('should return false when stack has 0 or 1 views', () => {
+      expect(chatPortalSelectors.canGoBack(createState())).toBe(false);
+      expect(
+        chatPortalSelectors.canGoBack(
+          createState({ portalStack: [{ type: PortalViewType.Notebook }] }),
+        ),
+      ).toBe(false);
+    });
+
+    it('should return true when stack has more than 1 view', () => {
+      const state = createState({
+        portalStack: [
+          { type: PortalViewType.Notebook },
+          { type: PortalViewType.Document, documentId: 'doc-1' },
+        ],
+      });
+      expect(chatPortalSelectors.canGoBack(state)).toBe(true);
+    });
+  });
+
+  describe('showArtifactUI', () => {
+    it('should return false when current view is not Artifact', () => {
+      expect(chatPortalSelectors.showArtifactUI(createState())).toBe(false);
+      expect(
+        chatPortalSelectors.showArtifactUI(
+          createState({ portalStack: [{ type: PortalViewType.Notebook }] }),
+        ),
+      ).toBe(false);
+    });
+
+    it('should return true when current view is Artifact', () => {
+      const state = createState({
+        portalStack: [
+          {
+            type: PortalViewType.Artifact,
+            artifact: { id: 'test', title: 'Test', type: 'text' },
+          },
+        ],
+      });
+      expect(chatPortalSelectors.showArtifactUI(state)).toBe(true);
+    });
+  });
+
   describe('showDock', () => {
     it('should return the showDock state', () => {
       expect(chatPortalSelectors.showPortal(createState({ showPortal: true }))).toBe(true);
@@ -27,12 +105,16 @@ describe('chatDockSelectors', () => {
   });
 
   describe('toolUIMessageId', () => {
-    it('should return undefined when dockToolMessage is not set', () => {
+    it('should return undefined when no ToolUI view on stack', () => {
       expect(chatPortalSelectors.toolMessageId(createState())).toBeUndefined();
     });
 
-    it('should return the id when dockToolMessage is set', () => {
-      const state = createState({ portalToolMessage: { id: 'test-id', identifier: 'test' } });
+    it('should return the messageId when ToolUI view is on stack', () => {
+      const state = createState({
+        portalStack: [
+          { type: PortalViewType.ToolUI, messageId: 'test-id', identifier: 'test' },
+        ],
+      });
       expect(chatPortalSelectors.toolMessageId(state)).toBe('test-id');
     });
   });
@@ -40,7 +122,9 @@ describe('chatDockSelectors', () => {
   describe('isMessageToolUIOpen', () => {
     it('should return false when id does not match or showDock is false', () => {
       const state = createState({
-        portalToolMessage: { id: 'test-id', identifier: 'test' },
+        portalStack: [
+          { type: PortalViewType.ToolUI, messageId: 'test-id', identifier: 'test' },
+        ],
         showPortal: false,
       });
       expect(chatPortalSelectors.isPluginUIOpen('test-id')(state)).toBe(false);
@@ -49,7 +133,9 @@ describe('chatDockSelectors', () => {
 
     it('should return true when id matches and showDock is true', () => {
       const state = createState({
-        portalToolMessage: { id: 'test-id', identifier: 'test' },
+        portalStack: [
+          { type: PortalViewType.ToolUI, messageId: 'test-id', identifier: 'test' },
+        ],
         showPortal: true,
       });
       expect(chatPortalSelectors.isPluginUIOpen('test-id')(state)).toBe(true);
@@ -57,45 +143,61 @@ describe('chatDockSelectors', () => {
   });
 
   describe('showToolUI', () => {
-    it('should return false when dockToolMessage is not set', () => {
+    it('should return false when no ToolUI view on stack', () => {
       expect(chatPortalSelectors.showPluginUI(createState())).toBe(false);
     });
 
-    it('should return true when dockToolMessage is set', () => {
-      const state = createState({ portalToolMessage: { id: 'test-id', identifier: 'test' } });
+    it('should return true when ToolUI view is on stack', () => {
+      const state = createState({
+        portalStack: [
+          { type: PortalViewType.ToolUI, messageId: 'test-id', identifier: 'test' },
+        ],
+      });
       expect(chatPortalSelectors.showPluginUI(state)).toBe(true);
     });
   });
 
   describe('toolUIIdentifier', () => {
-    it('should return undefined when dockToolMessage is not set', () => {
+    it('should return undefined when no ToolUI view on stack', () => {
       expect(chatPortalSelectors.toolUIIdentifier(createState())).toBeUndefined();
     });
 
-    it('should return the identifier when dockToolMessage is set', () => {
-      const state = createState({ portalToolMessage: { id: 'test-id', identifier: 'test' } });
+    it('should return the identifier when ToolUI view is on stack', () => {
+      const state = createState({
+        portalStack: [
+          { type: PortalViewType.ToolUI, messageId: 'test-id', identifier: 'test' },
+        ],
+      });
       expect(chatPortalSelectors.toolUIIdentifier(state)).toBe('test');
     });
   });
 
   describe('showFilePreview', () => {
-    it('should return false when portalFile is not set', () => {
+    it('should return false when no FilePreview view on stack', () => {
       expect(chatPortalSelectors.showFilePreview(createState())).toBe(false);
     });
 
-    it('should return true when portalFile is set', () => {
-      const state = createState({ portalFile: { fileId: 'file-id', chunkText: 'chunk' } });
+    it('should return true when FilePreview view is on stack', () => {
+      const state = createState({
+        portalStack: [
+          { type: PortalViewType.FilePreview, file: { fileId: 'file-id', chunkText: 'chunk' } },
+        ],
+      });
       expect(chatPortalSelectors.showFilePreview(state)).toBe(true);
     });
   });
 
   describe('previewFileId', () => {
-    it('should return undefined when portalFile is not set', () => {
+    it('should return undefined when no FilePreview view on stack', () => {
       expect(chatPortalSelectors.previewFileId(createState())).toBeUndefined();
     });
 
-    it('should return the fileId when portalFile is set', () => {
-      const state = createState({ portalFile: { fileId: 'file-id', chunkText: 'chunk' } });
+    it('should return the fileId when FilePreview view is on stack', () => {
+      const state = createState({
+        portalStack: [
+          { type: PortalViewType.FilePreview, file: { fileId: 'file-id', chunkText: 'chunk' } },
+        ],
+      });
       expect(chatPortalSelectors.previewFileId(state)).toBe('file-id');
     });
   });

package/src/store/chat/slices/portal/selectors.ts

@@ -1,35 +1,66 @@
 import { ARTIFACT_TAG_CLOSED_REGEX, ARTIFACT_TAG_REGEX } from '@/const/plugin';
 import type { ChatStoreState } from '@/store/chat';
+import { type PortalArtifact } from '@/types/artifact';
 
 import { dbMessageSelectors } from '../message/selectors';
+import { type PortalFile, type PortalViewData, PortalViewType } from './initialState';
 
-const showPortal = (s: ChatStoreState) => s.showPortal;
+// ============== Core Stack Selectors ==============
 
-const showMessageDetail = (s: ChatStoreState) => !!s.portalMessageDetail;
-const messageDetailId = (s: ChatStoreState) => s.portalMessageDetail;
+const currentView = (s: ChatStoreState): PortalViewData | null => {
+  const { portalStack } = s;
+  return portalStack.at(-1) ?? null;
+};
 
-const showPluginUI = (s: ChatStoreState) => !!s.portalToolMessage;
+const currentViewType = (s: ChatStoreState): PortalViewType | null => {
+  return currentView(s)?.type ?? null;
+};
 
-const toolMessageId = (s: ChatStoreState) => s.portalToolMessage?.id;
-const isPluginUIOpen = (id: string) => (s: ChatStoreState) =>
-  toolMessageId(s) === id && showPortal(s);
-const toolUIIdentifier = (s: ChatStoreState) => s.portalToolMessage?.identifier;
+const canGoBack = (s: ChatStoreState): boolean => {
+  return s.portalStack.length > 1;
+};
+
+const stackDepth = (s: ChatStoreState): number => {
+  return s.portalStack.length;
+};
 
-const showFilePreview = (s: ChatStoreState) => !!s.portalFile;
-const previewFileId = (s: ChatStoreState) => s.portalFile?.fileId;
-const chunkText = (s: ChatStoreState) => s.portalFile?.chunkText;
+const showPortal = (s: ChatStoreState) => s.showPortal;
 
-const showNotebook = (s: ChatStoreState) => !!s.showNotebook;
+// ============== View Type Guards ==============
+
+const showArtifactUI = (s: ChatStoreState) => currentViewType(s) === PortalViewType.Artifact;
+const showDocument = (s: ChatStoreState) => currentViewType(s) === PortalViewType.Document;
+const showNotebook = (s: ChatStoreState) => currentViewType(s) === PortalViewType.Notebook;
+const showFilePreview = (s: ChatStoreState) => currentViewType(s) === PortalViewType.FilePreview;
+const showMessageDetail = (s: ChatStoreState) =>
+  currentViewType(s) === PortalViewType.MessageDetail;
+const showPluginUI = (s: ChatStoreState) => currentViewType(s) === PortalViewType.ToolUI;
+
+// ============== Data Extractors ==============
+
+// Helper to extract data from current view
+const getViewData = <T extends PortalViewType>(
+  s: ChatStoreState,
+  type: T,
+): Extract<PortalViewData, { type: T }> | null => {
+  const view = currentView(s);
+  if (view?.type === type) {
+    return view as Extract<PortalViewData, { type: T }>;
+  }
+  return null;
+};
 
-const showDocument = (s: ChatStoreState) => !!s.portalDocumentId;
-const portalDocumentId = (s: ChatStoreState) => s.portalDocumentId;
+// Artifact selectors
+const currentArtifact = (s: ChatStoreState): PortalArtifact | undefined => {
+  const view = getViewData(s, PortalViewType.Artifact);
+  return view?.artifact;
+};
 
-const showArtifactUI = (s: ChatStoreState) => !!s.portalArtifact;
-const artifactTitle = (s: ChatStoreState) => s.portalArtifact?.title;
-const artifactIdentifier = (s: ChatStoreState) => s.portalArtifact?.identifier || '';
-const artifactMessageId = (s: ChatStoreState) => s.portalArtifact?.id;
-const artifactType = (s: ChatStoreState) => s.portalArtifact?.type;
-const artifactCodeLanguage = (s: ChatStoreState) => s.portalArtifact?.language;
+const artifactTitle = (s: ChatStoreState) => currentArtifact(s)?.title;
+const artifactIdentifier = (s: ChatStoreState) => currentArtifact(s)?.identifier || '';
+const artifactMessageId = (s: ChatStoreState) => currentArtifact(s)?.id;
+const artifactType = (s: ChatStoreState) => currentArtifact(s)?.type;
+const artifactCodeLanguage = (s: ChatStoreState) => currentArtifact(s)?.language;
 
 const artifactMessageContent = (id: string) => (s: ChatStoreState) => {
   const message = dbMessageSelectors.getDbMessageById(id)(s);
@@ -54,37 +85,87 @@ const isArtifactTagClosed = (id: string) => (s: ChatStoreState) => {
   return ARTIFACT_TAG_CLOSED_REGEX.test(content || '');
 };
 
-/* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
-export const chatPortalSelectors = {
-  isPluginUIOpen,
+// Document selectors
+const portalDocumentId = (s: ChatStoreState): string | undefined => {
+  const view = getViewData(s, PortalViewType.Document);
+  return view?.documentId;
+};
 
-  previewFileId,
-  showFilePreview,
-  chunkText,
+// File Preview selectors
+const currentFile = (s: ChatStoreState): PortalFile | undefined => {
+  const view = getViewData(s, PortalViewType.FilePreview);
+  return view?.file;
+};
 
-  messageDetailId,
-  showMessageDetail,
+const previewFileId = (s: ChatStoreState) => currentFile(s)?.fileId;
+const chunkText = (s: ChatStoreState) => currentFile(s)?.chunkText;
 
-  showNotebook,
+// Message Detail selectors
+const messageDetailId = (s: ChatStoreState): string | undefined => {
+  const view = getViewData(s, PortalViewType.MessageDetail);
+  return view?.messageId;
+};
 
-  showDocument,
-  portalDocumentId,
+// Tool UI / Plugin selectors
+const currentToolUI = (
+  s: ChatStoreState,
+): { identifier: string; messageId: string } | undefined => {
+  const view = getViewData(s, PortalViewType.ToolUI);
+  if (view) {
+    return { identifier: view.identifier, messageId: view.messageId };
+  }
+  return undefined;
+};
 
-  showPluginUI,
-  showPortal,
+const toolMessageId = (s: ChatStoreState) => currentToolUI(s)?.messageId;
+const toolUIIdentifier = (s: ChatStoreState) => currentToolUI(s)?.identifier;
+const isPluginUIOpen = (id: string) => (s: ChatStoreState) =>
+  toolMessageId(s) === id && showPortal(s);
 
-  toolMessageId,
-  toolUIIdentifier,
+/* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
+export const chatPortalSelectors = {
+  // Core stack selectors
+  currentView,
+  currentViewType,
+  canGoBack,
+  stackDepth,
+  showPortal,
 
+  // View type guards
   showArtifactUI,
+  showDocument,
+  showNotebook,
+  showFilePreview,
+  showMessageDetail,
+  showPluginUI,
+
+  // Artifact data
+  currentArtifact,
   artifactTitle,
   artifactIdentifier,
   artifactMessageId,
   artifactType,
+  artifactCodeLanguage,
   artifactCode,
   artifactMessageContent,
-  artifactCodeLanguage,
   isArtifactTagClosed,
+
+  // Document data
+  portalDocumentId,
+
+  // File preview data
+  currentFile,
+  previewFileId,
+  chunkText,
+
+  // Message detail data
+  messageDetailId,
+
+  // Tool UI data
+  currentToolUI,
+  toolMessageId,
+  toolUIIdentifier,
+  isPluginUIOpen,
 };
 
 export * from './selectors/thread';

package/src/store/document/index.ts

@@ -1,11 +1,23 @@
 // Selectors
 export { editorSelectors } from './slices/editor';
-export { notebookSelectors } from './slices/notebook';
 
 // Store
-export type { DocumentAction, DocumentState, DocumentStore } from './store';
+export type { DocumentState, DocumentStore, DocumentStoreAction } from './store';
 export { getDocumentStoreState, useDocumentStore } from './store';
 
-// Re-export slice types
-export type { EditorAction, EditorState } from './slices/editor';
-export type { NotebookAction, NotebookState } from './slices/notebook';
+// Re-export document slice types
+export type {
+  DocumentAction,
+  InitDocumentParams,
+  UseFetchDocumentOptions,
+} from './slices/document';
+
+// Re-export editor slice types
+export type {
+  DocumentSourceType,
+  EditorAction,
+  EditorContentState,
+  EditorState,
+  SaveMetadata,
+} from './slices/editor';
+export { createInitialEditorContentState } from './slices/editor';

package/src/store/document/slices/document/action.ts

@@ -0,0 +1,209 @@
+'use client';
+
+import { EDITOR_DEBOUNCE_TIME, EDITOR_MAX_WAIT } from '@lobechat/const';
+import { type DocumentItem } from '@lobechat/database/schemas';
+import { type IEditor } from '@lobehub/editor';
+import { debounce } from 'es-toolkit/compat';
+import type { SWRResponse } from 'swr';
+import { type StateCreator } from 'zustand/vanilla';
+
+import { useClientDataSWRWithSync } from '@/libs/swr';
+import { documentService } from '@/services/document';
+import { setNamespace } from '@/utils/storeDebug';
+
+import type { DocumentStore } from '../../store';
+import { type DocumentSourceType } from '../editor/initialState';
+
+const n = setNamespace('document/document');
+
+/**
+ * Parameters for initializing a document with editor
+ */
+export interface InitDocumentParams {
+  /**
+   * Whether auto-save is enabled. Defaults to true.
+   * Set to false if the consumer handles saving themselves.
+   */
+  autoSave?: boolean;
+  content?: string | null;
+  documentId: string;
+  editor: IEditor;
+  editorData?: unknown;
+  sourceType: DocumentSourceType;
+  topicId?: string;
+}
+
+/**
+ * Options for useFetchDocument hook
+ */
+export interface UseFetchDocumentOptions {
+  /**
+   * Whether auto-save is enabled. Defaults to true.
+   */
+  autoSave?: boolean;
+  /**
+   * Editor instance to load content into
+   */
+  editor?: IEditor;
+  /**
+   * Source type for the document. Defaults to 'page'.
+   */
+  sourceType?: DocumentSourceType;
+}
+
+export interface DocumentAction {
+  /**
+   * Close a document and remove it from state
+   */
+  closeDocument: (documentId: string) => void;
+  /**
+   * Flush any pending debounced save for a document
+   */
+  flushSave: (documentId?: string) => void;
+  /**
+   * Initialize a document with editor - stores state only.
+   * Content is loaded into editor via onEditorInit when Editor component is ready.
+   */
+  initDocumentWithEditor: (params: InitDocumentParams) => void;
+  /**
+   * Trigger a debounced save for the specified document
+   */
+  triggerDebouncedSave: (documentId: string) => void;
+  /**
+   * SWR hook to fetch document and initialize in DocumentStore
+   */
+  useFetchDocument: (
+    documentId: string | undefined,
+    options?: UseFetchDocumentOptions,
+  ) => SWRResponse<DocumentItem | null>;
+}
+
+export const createDocumentSlice: StateCreator<
+  DocumentStore,
+  [['zustand/devtools', never]],
+  [],
+  DocumentAction
+> = (set, get) => {
+  // Store debounced save functions per document - inside store closure so `get` is always correct
+  const debouncedSaves = new Map<string, ReturnType<typeof debounce>>();
+
+  const getOrCreateDebouncedSave = (documentId: string) => {
+    if (!debouncedSaves.has(documentId)) {
+      const debouncedFn = debounce(
+        async () => {
+          try {
+            await get().performSave(documentId);
+          } catch (error) {
+            console.error('[DocumentStore] Failed to auto-save:', error);
+          }
+        },
+        EDITOR_DEBOUNCE_TIME,
+        { leading: false, maxWait: EDITOR_MAX_WAIT, trailing: true },
+      );
+      debouncedSaves.set(documentId, debouncedFn);
+    }
+    return debouncedSaves.get(documentId)!;
+  };
+
+  const cleanupDebouncedSave = (documentId: string) => {
+    const fn = debouncedSaves.get(documentId);
+    if (fn) {
+      fn.cancel();
+      debouncedSaves.delete(documentId);
+    }
+  };
+
+  return {
+    closeDocument: (documentId) => {
+      // Flush any pending saves before closing
+      const save = debouncedSaves.get(documentId);
+      if (save) {
+        save.flush();
+        cleanupDebouncedSave(documentId);
+      }
+
+      const { activeDocumentId, internal_dispatchDocument } = get();
+
+      // Delete document via reducer
+      internal_dispatchDocument({ id: documentId, type: 'deleteDocument' });
+
+      // Update activeDocumentId if needed
+      if (activeDocumentId === documentId) {
+        set({ activeDocumentId: undefined }, false, n('closeDocument:clearActive'));
+      }
+    },
+
+    flushSave: (documentId) => {
+      const id = documentId || get().activeDocumentId;
+      if (id) {
+        const save = debouncedSaves.get(id);
+        save?.flush();
+      }
+    },
+
+    initDocumentWithEditor: (params) => {
+      const { documentId, sourceType, content, editorData, topicId, autoSave, editor } = params;
+
+      const { internal_dispatchDocument } = get();
+
+      // Add or update document via reducer
+      internal_dispatchDocument({
+        id: documentId,
+        type: 'addDocument',
+        value: {
+          autoSave,
+          content: content ?? undefined,
+          editorData,
+          lastSavedContent: content ?? undefined,
+          sourceType,
+          topicId,
+        },
+      });
+
+      // Update activeDocumentId and editor
+      set({ activeDocumentId: documentId, editor }, false, n('initDocumentWithEditor:setActive'));
+    },
+
+    triggerDebouncedSave: (documentId) => {
+      const save = getOrCreateDebouncedSave(documentId);
+      save();
+    },
+
+    useFetchDocument: (documentId, options = {}) => {
+      const { autoSave = true, editor, sourceType = 'page' } = options;
+      const swrKey = documentId && editor ? ['document/editor', documentId] : null;
+
+      return useClientDataSWRWithSync<DocumentItem | null>(
+        swrKey,
+        async () => {
+          // documentId is guaranteed to be defined when swrKey is not null
+          const document = await documentService.getDocumentById(documentId!);
+          if (!document) {
+            console.warn(`[useFetchDocument] Document not found: ${documentId}`);
+            return null;
+          }
+
+          return document;
+        },
+        {
+          focusThrottleInterval: 20_000,
+          onData: (document) => {
+            // Both documentId and editor are guaranteed to be defined when this callback is called
+            if (!document || !documentId || !editor) return;
+
+            // Initialize document with editor
+            get().initDocumentWithEditor({
+              autoSave,
+              content: document.content,
+              documentId,
+              editor,
+              editorData: document.editorData,
+              sourceType,
+            });
+          },
+          revalidateOnFocus: true,
+        },
+      );
+    },
+  };
+};

package/src/store/document/slices/document/index.ts

@@ -0,0 +1,6 @@
+export {
+  createDocumentSlice,
+  type DocumentAction,
+  type InitDocumentParams,
+  type UseFetchDocumentOptions,
+} from './action';