@lobehub/lobehub 2.0.0-next.254 → 2.0.0-next.256

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

@@ -3,19 +3,219 @@ import { describe, expect, it, vi } from 'vitest';
 
 import { useChatStore } from '@/store/chat';
 
+import { PortalViewType } from './initialState';
+
 vi.mock('zustand/traditional');
 
 describe('chatDockSlice', () => {
+  describe('pushPortalView', () => {
+    it('should push a new view onto the stack and open portal', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      expect(result.current.portalStack).toEqual([]);
+      expect(result.current.showPortal).toBe(false);
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Notebook });
+      });
+
+      expect(result.current.portalStack).toHaveLength(1);
+      expect(result.current.portalStack[0]).toEqual({ type: PortalViewType.Notebook });
+      expect(result.current.showPortal).toBe(true);
+    });
+
+    it('should replace top view when pushing same type', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Document, documentId: 'doc-1' });
+      });
+
+      expect(result.current.portalStack).toHaveLength(1);
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Document, documentId: 'doc-2' });
+      });
+
+      expect(result.current.portalStack).toHaveLength(1);
+      expect(result.current.portalStack[0]).toEqual({
+        type: PortalViewType.Document,
+        documentId: 'doc-2',
+      });
+    });
+
+    it('should stack different view types', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Notebook });
+      });
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Document, documentId: 'doc-1' });
+      });
+
+      expect(result.current.portalStack).toHaveLength(2);
+      expect(result.current.portalStack[0]).toEqual({ type: PortalViewType.Notebook });
+      expect(result.current.portalStack[1]).toEqual({
+        type: PortalViewType.Document,
+        documentId: 'doc-1',
+      });
+    });
+  });
+
+  describe('popPortalView', () => {
+    it('should pop the top view and close portal when stack is empty', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Notebook });
+      });
+
+      expect(result.current.showPortal).toBe(true);
+
+      act(() => {
+        result.current.popPortalView();
+      });
+
+      expect(result.current.portalStack).toHaveLength(0);
+      expect(result.current.showPortal).toBe(false);
+    });
+
+    it('should pop top view and keep portal open when more views exist', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Notebook });
+      });
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Document, documentId: 'doc-1' });
+      });
+
+      expect(result.current.portalStack).toHaveLength(2);
+
+      act(() => {
+        result.current.popPortalView();
+      });
+
+      expect(result.current.portalStack).toHaveLength(1);
+      expect(result.current.portalStack[0]).toEqual({ type: PortalViewType.Notebook });
+      expect(result.current.showPortal).toBe(true);
+    });
+  });
+
+  describe('replacePortalView', () => {
+    it('should replace top view with new view', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Notebook });
+      });
+
+      act(() => {
+        result.current.replacePortalView({ type: PortalViewType.Document, documentId: 'doc-1' });
+      });
+
+      expect(result.current.portalStack).toHaveLength(1);
+      expect(result.current.portalStack[0]).toEqual({
+        type: PortalViewType.Document,
+        documentId: 'doc-1',
+      });
+    });
+
+    it('should push view when stack is empty', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      act(() => {
+        result.current.replacePortalView({ type: PortalViewType.Notebook });
+      });
+
+      expect(result.current.portalStack).toHaveLength(1);
+      expect(result.current.portalStack[0]).toEqual({ type: PortalViewType.Notebook });
+      expect(result.current.showPortal).toBe(true);
+    });
+  });
+
+  describe('clearPortalStack', () => {
+    it('should clear all views and close portal', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Notebook });
+      });
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Document, documentId: 'doc-1' });
+      });
+
+      expect(result.current.portalStack).toHaveLength(2);
+
+      act(() => {
+        result.current.clearPortalStack();
+      });
+
+      expect(result.current.portalStack).toHaveLength(0);
+      expect(result.current.showPortal).toBe(false);
+    });
+  });
+
+  describe('goBack', () => {
+    it('should pop top view when stack has multiple views', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Notebook });
+      });
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Document, documentId: 'doc-1' });
+      });
+
+      act(() => {
+        result.current.goBack();
+      });
+
+      expect(result.current.portalStack).toHaveLength(1);
+      expect(result.current.portalStack[0]).toEqual({ type: PortalViewType.Notebook });
+    });
+  });
+
+  describe('goHome', () => {
+    it('should replace stack with home view', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Notebook });
+      });
+
+      act(() => {
+        result.current.pushPortalView({ type: PortalViewType.Document, documentId: 'doc-1' });
+      });
+
+      act(() => {
+        result.current.goHome();
+      });
+
+      expect(result.current.portalStack).toHaveLength(1);
+      expect(result.current.portalStack[0]).toEqual({ type: PortalViewType.Home });
+      expect(result.current.showPortal).toBe(true);
+    });
+  });
+
+
   describe('closeToolUI', () => {
-    it('should set dockToolMessage to undefined', () => {
+    it('should pop ToolUI view from stack', () => {
       const { result } = renderHook(() => useChatStore());
 
       act(() => {
         result.current.openToolUI('test-id', 'test-identifier');
       });
 
-      expect(result.current.portalToolMessage).toEqual({
-        id: 'test-id',
+      expect(result.current.portalStack).toHaveLength(1);
+      expect(result.current.portalStack[0]).toEqual({
+        type: PortalViewType.ToolUI,
+        messageId: 'test-id',
         identifier: 'test-identifier',
       });
 
@@ -23,12 +223,13 @@ describe('chatDockSlice', () => {
         result.current.closeToolUI();
       });
 
-      expect(result.current.portalToolMessage).toBeUndefined();
+      expect(result.current.portalStack).toHaveLength(0);
+      expect(result.current.showPortal).toBe(false);
     });
   });
 
   describe('openToolUI', () => {
-    it('should set dockToolMessage and open dock if it is closed', () => {
+    it('should push ToolUI view and open portal', () => {
       const { result } = renderHook(() => useChatStore());
 
       expect(result.current.showPortal).toBe(false);
@@ -37,29 +238,31 @@ describe('chatDockSlice', () => {
         result.current.openToolUI('test-id', 'test-identifier');
       });
 
-      expect(result.current.portalToolMessage).toEqual({
-        id: 'test-id',
+      expect(result.current.portalStack).toHaveLength(1);
+      expect(result.current.portalStack[0]).toEqual({
+        type: PortalViewType.ToolUI,
+        messageId: 'test-id',
         identifier: 'test-identifier',
       });
       expect(result.current.showPortal).toBe(true);
     });
 
-    it('should not change dock state if it is already open', () => {
+    it('should replace same type view on stack', () => {
       const { result } = renderHook(() => useChatStore());
 
       act(() => {
-        result.current.togglePortal(true);
+        result.current.openToolUI('test-id-1', 'identifier-1');
       });
 
-      expect(result.current.showPortal).toBe(true);
-
       act(() => {
-        result.current.openToolUI('test-id', 'test-identifier');
+        result.current.openToolUI('test-id-2', 'identifier-2');
       });
 
-      expect(result.current.portalToolMessage).toEqual({
-        id: 'test-id',
-        identifier: 'test-identifier',
+      expect(result.current.portalStack).toHaveLength(1);
+      expect(result.current.portalStack[0]).toEqual({
+        type: PortalViewType.ToolUI,
+        messageId: 'test-id-2',
+        identifier: 'identifier-2',
       });
       expect(result.current.showPortal).toBe(true);
     });

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

@@ -3,94 +3,247 @@ import { type StateCreator } from 'zustand/vanilla';
 import { type ChatStore } from '@/store/chat/store';
 import { type PortalArtifact } from '@/types/artifact';
 
-import { type PortalFile } from './initialState';
+import { type PortalFile, type PortalViewData, PortalViewType } from './initialState';
 
 export interface ChatPortalAction {
+  // ============== Core Stack Operations ==============
+  clearPortalStack: () => void;
+  // ============== Convenience Methods ==============
   closeArtifact: () => void;
   closeDocument: () => void;
   closeFilePreview: () => void;
   closeMessageDetail: () => void;
   closeNotebook: () => void;
+
   closeToolUI: () => void;
+  goBack: () => void;
+  goHome: () => void;
   openArtifact: (artifact: PortalArtifact) => void;
   openDocument: (documentId: string) => void;
-  openFilePreview: (portal: PortalFile) => void;
+  openFilePreview: (file: PortalFile) => void;
   openMessageDetail: (messageId: string) => void;
   openNotebook: () => void;
   openToolUI: (messageId: string, identifier: string) => void;
+  popPortalView: () => void;
+  pushPortalView: (view: PortalViewData) => void;
+  replacePortalView: (view: PortalViewData) => void;
   toggleNotebook: (open?: boolean) => void;
   togglePortal: (open?: boolean) => void;
 }
 
+// Helper to get current view type from stack
+const getCurrentViewType = (portalStack: PortalViewData[]): PortalViewType | null => {
+  const top = portalStack.at(-1);
+  return top?.type ?? null;
+};
+
 export const chatPortalSlice: StateCreator<
   ChatStore,
   [['zustand/devtools', never]],
   [],
   ChatPortalAction
 > = (set, get) => ({
-  closeArtifact: () => {
-    get().togglePortal(false);
-    set({ portalArtifact: undefined }, false, 'closeArtifact');
+
+
+  clearPortalStack: () => {
+    set({ portalStack: [], showPortal: false }, false, 'clearPortalStack');
   },
-  closeDocument: () => {
-    set({ portalDocumentId: undefined }, false, 'closeDocument');
+
+
+closeArtifact: () => {
+    const { portalStack } = get();
+    if (getCurrentViewType(portalStack) === PortalViewType.Artifact) {
+      get().popPortalView();
+    }
   },
-  closeFilePreview: () => {
-    set({ portalFile: undefined }, false, 'closeFilePreview');
+
+
+closeDocument: () => {
+    const { portalStack } = get();
+    if (getCurrentViewType(portalStack) === PortalViewType.Document) {
+      get().popPortalView();
+    }
   },
-  closeMessageDetail: () => {
-    set({ portalMessageDetail: undefined }, false, 'openMessageDetail');
+
+
+closeFilePreview: () => {
+    const { portalStack } = get();
+    if (getCurrentViewType(portalStack) === PortalViewType.FilePreview) {
+      get().popPortalView();
+    }
   },
-  closeNotebook: () => {
-    set({ showNotebook: false }, false, 'closeNotebook');
+
+
+closeMessageDetail: () => {
+    const { portalStack } = get();
+    if (getCurrentViewType(portalStack) === PortalViewType.MessageDetail) {
+      get().popPortalView();
+    }
   },
-  closeToolUI: () => {
-    set({ portalToolMessage: undefined }, false, 'closeToolUI');
+
+
+closeNotebook: () => {
+    const { portalStack } = get();
+    if (getCurrentViewType(portalStack) === PortalViewType.Notebook) {
+      get().popPortalView();
+    }
   },
-  openArtifact: (artifact) => {
-    get().togglePortal(true);
 
-    set({ portalArtifact: artifact }, false, 'openArtifact');
+
+
+
+closeToolUI: () => {
+    const { portalStack } = get();
+    if (getCurrentViewType(portalStack) === PortalViewType.ToolUI) {
+      get().popPortalView();
+    }
   },
-  openDocument: (documentId) => {
-    get().togglePortal(true);
 
-    set({ portalDocumentId: documentId, showNotebook: true }, false, 'openDocument');
+
+
+goBack: () => {
+    get().popPortalView();
   },
-  openFilePreview: (portal) => {
-    get().togglePortal(true);
 
-    set({ portalFile: portal }, false, 'openFilePreview');
+
+
+goHome: () => {
+    set(
+      {
+        portalStack: [{ type: PortalViewType.Home }],
+        showPortal: true,
+      },
+      false,
+      'goHome',
+    );
   },
-  openMessageDetail: (messageId) => {
-    get().togglePortal(true);
 
-    set({ portalMessageDetail: messageId }, false, 'openMessageDetail');
+
+
+// ============== Convenience Methods (using stack operations) ==============
+openArtifact: (artifact) => {
+    get().pushPortalView({ artifact, type: PortalViewType.Artifact });
   },
 
-  openNotebook: () => {
-    get().togglePortal(true);
 
-    set({ showNotebook: true }, false, 'openNotebook');
+
+
+openDocument: (documentId) => {
+    get().pushPortalView({ documentId, type: PortalViewType.Document });
   },
 
-  openToolUI: (id, identifier) => {
-    get().togglePortal(true);
 
-    set({ portalToolMessage: { id, identifier } }, false, 'openToolUI');
+
+
+openFilePreview: (file) => {
+    get().pushPortalView({ file, type: PortalViewType.FilePreview });
+  },
+
+
+
+openMessageDetail: (messageId) => {
+    get().pushPortalView({ messageId, type: PortalViewType.MessageDetail });
+  },
+
+
+openNotebook: () => {
+    get().pushPortalView({ type: PortalViewType.Notebook });
+  },
+
+
+openToolUI: (messageId, identifier) => {
+    get().pushPortalView({ identifier, messageId, type: PortalViewType.ToolUI });
+  },
+
+
+popPortalView: () => {
+    const { portalStack } = get();
+
+    if (portalStack.length <= 1) {
+      // Stack empty or only one item, clear stack and close portal
+      set({ portalStack: [], showPortal: false }, false, 'popPortalView/close');
+    } else {
+      set({ portalStack: portalStack.slice(0, -1) }, false, 'popPortalView');
+    }
+  },
+
+  // ============== Core Stack Operations ==============
+pushPortalView: (view) => {
+    const { portalStack } = get();
+    const top = portalStack.at(-1);
+
+    // If top of stack is same type, replace instead of push (avoid duplicates)
+    if (top?.type === view.type) {
+      set(
+        {
+          portalStack: [...portalStack.slice(0, -1), view],
+          showPortal: true,
+        },
+        false,
+        'pushPortalView/replace',
+      );
+    } else {
+      set(
+        {
+          portalStack: [...portalStack, view],
+          showPortal: true,
+        },
+        false,
+        'pushPortalView',
+      );
+    }
+  },
+
+  replacePortalView: (view) => {
+    const { portalStack } = get();
+
+    if (portalStack.length === 0) {
+      set({ portalStack: [view], showPortal: true }, false, 'replacePortalView/push');
+    } else {
+      set(
+        {
+          portalStack: [...portalStack.slice(0, -1), view],
+          showPortal: true,
+        },
+        false,
+        'replacePortalView',
+      );
+    }
   },
 
   toggleNotebook: (open) => {
-    const showNotebook = open === undefined ? !get().showNotebook : open;
+    const { portalStack } = get();
+    const isCurrentlyNotebook = getCurrentViewType(portalStack) === PortalViewType.Notebook;
+    const shouldOpen = open ?? !isCurrentlyNotebook;
 
-    get().togglePortal(showNotebook);
-    set({ showNotebook }, false, 'toggleNotebook');
+    if (shouldOpen) {
+      get().openNotebook();
+    } else {
+      get().closeNotebook();
+    }
   },
+
   togglePortal: (open) => {
-    const showInspector = open === undefined ? !get().showPortal : open;
-    set({ showPortal: showInspector }, false, 'toggleInspector');
+    const nextOpen = open === undefined ? !get().showPortal : open;
+
+    if (!nextOpen) {
+      // When closing, clear the stack
+      set({ portalStack: [], showPortal: false }, false, 'togglePortal/close');
+    } else {
+      // When opening, if stack is empty, push Home view
+      const { portalStack } = get();
+      if (portalStack.length === 0) {
+        set(
+          {
+            portalStack: [{ type: PortalViewType.Home }],
+            showPortal: true,
+          },
+          false,
+          'togglePortal/openHome',
+        );
+      } else {
+        set({ showPortal: true }, false, 'togglePortal/open');
+      }
+    }
   },
-  // updateArtifactContent: (content) => {
-  //   set({ portalArtifact: content }, false, 'updateArtifactContent');
-  // },
 });

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

@@ -5,25 +5,64 @@ export enum ArtifactDisplayMode {
   Preview = 'preview',
 }
 
+// ============== Portal View Stack Types ==============
+
+export enum PortalViewType {
+  Artifact = 'artifact',
+  Document = 'document',
+  FilePreview = 'filePreview',
+  GroupThread = 'groupThread',
+  Home = 'home',
+  MessageDetail = 'messageDetail',
+  Notebook = 'notebook',
+  Thread = 'thread',
+  ToolUI = 'toolUI'
+}
+
 export interface PortalFile {
   chunkId?: string;
   chunkText?: string;
   fileId: string;
 }
 
+export type PortalViewData =
+  | { type: PortalViewType.Home }
+  | { artifact: PortalArtifact, type: PortalViewType.Artifact; }
+  | { documentId: string, type: PortalViewType.Document; }
+  | { type: PortalViewType.Notebook }
+  | { file: PortalFile, type: PortalViewType.FilePreview; }
+  | { messageId: string, type: PortalViewType.MessageDetail; }
+  | { identifier: string, messageId: string; type: PortalViewType.ToolUI; }
+  | { startMessageId?: string, threadId?: string; type: PortalViewType.Thread; }
+  | { agentId: string, type: PortalViewType.GroupThread; };
+
+// ============== Portal State ==============
+
 export interface ChatPortalState {
+  // Legacy fields (kept for backward compatibility during migration)
+// TODO: Remove after Phase 3 migration complete
+/** @deprecated Use portalStack instead */
   portalArtifact?: PortalArtifact;
-  portalArtifactDisplayMode?: ArtifactDisplayMode;
+  portalArtifactDisplayMode: ArtifactDisplayMode;
+  /** @deprecated Use portalStack instead */
   portalDocumentId?: string;
+
+  /** @deprecated Use portalStack instead */
   portalFile?: PortalFile;
+  /** @deprecated Use portalStack instead */
   portalMessageDetail?: string;
+  portalStack: PortalViewData[];
+  /** @deprecated Use portalStack instead */
   portalThreadId?: string;
+  /** @deprecated Use portalStack instead */
   portalToolMessage?: { id: string; identifier: string };
+  /** @deprecated Use portalStack instead */
   showNotebook?: boolean;
   showPortal: boolean;
 }
 
 export const initialChatPortalState: ChatPortalState = {
   portalArtifactDisplayMode: ArtifactDisplayMode.Preview,
+  portalStack: [],
   showPortal: false,
 };

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

@@ -1,17 +1,58 @@
 import type { ChatStoreState } from '@/store/chat';
 
-const showThread = (s: ChatStoreState) => !!s.threadStartMessageId || !!s.portalThreadId;
+import { type PortalViewData, PortalViewType } from '../initialState';
+
+// Helper to get current view
+const getCurrentView = (s: ChatStoreState): PortalViewData | null => {
+  const { portalStack } = s;
+  return portalStack.at(-1) ?? null;
+};
+
+// Check if current view is Thread
+const showThread = (s: ChatStoreState) => {
+  const view = getCurrentView(s);
+  if (view?.type === PortalViewType.Thread) {
+    return true;
+  }
+  // Also check legacy threadStartMessageId for backward compatibility during transition
+  return !!s.threadStartMessageId;
+};
 
 const newThreadMode = (s: ChatStoreState) => s.newThreadMode;
 
+// Get current thread data from stack
+const currentThreadView = (s: ChatStoreState) => {
+  const view = getCurrentView(s);
+  if (view?.type === PortalViewType.Thread) {
+    return view;
+  }
+  return null;
+};
+
+// Get thread ID - from stack or legacy field
+const portalThreadId = (s: ChatStoreState): string | undefined => {
+  const threadView = currentThreadView(s);
+  return threadView?.threadId ?? s.portalThreadId;
+};
+
+// Get start message ID - from stack or legacy field
+const threadStartMessageId = (s: ChatStoreState): string | undefined => {
+  const threadView = currentThreadView(s);
+  return threadView?.startMessageId ?? s.threadStartMessageId ?? undefined;
+};
+
 const portalCurrentThread = (s: ChatStoreState) => {
-  if (!s.portalThreadId || !s.activeTopicId) return;
+  const threadId = portalThreadId(s);
+  if (!threadId || !s.activeTopicId) return;
 
-  return (s.threadMaps[s.activeTopicId] || []).find((t) => t.id === s.portalThreadId);
+  return (s.threadMaps[s.activeTopicId] || []).find((t) => t.id === threadId);
 };
 
 export const portalThreadSelectors = {
+  currentThreadView,
   newThreadMode,
   portalCurrentThread,
+  portalThreadId,
   showThread,
+  threadStartMessageId,
 };