@lobehub/lobehub 2.0.0-next.278 → 2.0.0-next.279

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 # Changelog
 
+## [Version 2.0.0-next.279](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.278...v2.0.0-next.279)
+
+<sup>Released on **2026-01-13**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix new topic flick issue, fix thread portal not open correctly.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix new topic flick issue, closes [#11473](https://github.com/lobehub/lobe-chat/issues/11473) ([c53d372](https://github.com/lobehub/lobe-chat/commit/c53d372))
+- **misc**: Fix thread portal not open correctly, closes [#11475](https://github.com/lobehub/lobe-chat/issues/11475) ([e6ff90b](https://github.com/lobehub/lobe-chat/commit/e6ff90b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.278](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.277...v2.0.0-next.278)
 
 <sup>Released on **2026-01-13**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Fix new topic flick issue, fix thread portal not open correctly."
+      ]
+    },
+    "date": "2026-01-13",
+    "version": "2.0.0-next.279"
+  },
   {
     "children": {},
     "date": "2026-01-13",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.278",
+  "version": "2.0.0-next.279",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/(main)/agent/features/Conversation/ThreadHydration.tsx

@@ -6,6 +6,7 @@ import { createStoreUpdater } from 'zustand-utils';
 import { useFetchThreads } from '@/hooks/useFetchThreads';
 import { useQueryState } from '@/hooks/useQueryParam';
 import { useChatStore } from '@/store/chat';
+import { PortalViewType } from '@/store/chat/slices/portal/initialState';
 
 // sync outside state to useChatStore
 const ThreadHydration = memo(() => {
@@ -31,7 +32,7 @@ const ThreadHydration = memo(() => {
   // should open portal automatically when portalThread is set
   useEffect(() => {
     if (!!portalThread && !useChatStore.getState().showPortal) {
-      useChatStore.getState().togglePortal(true);
+      useChatStore.getState().pushPortalView({ threadId: portalThread, type: PortalViewType.Thread });
     }
   }, [portalThread]);
 

package/src/app/[variants]/(main)/agent/features/Portal/_layout/Mobile.tsx

@@ -16,10 +16,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 }));
 
 const Layout = () => {
-  const [showMobilePortal, isPortalThread, togglePortal] = useChatStore((s) => [
+  const [showMobilePortal, isPortalThread, clearPortalStack] = useChatStore((s) => [
     s.showPortal,
     portalThreadSelectors.showThread(s),
-    s.togglePortal,
+    s.clearPortalStack,
   ]);
   const { t } = useTranslation('portal');
 
@@ -42,7 +42,7 @@ const Layout = () => {
       destroyOnHidden
       footer={null}
       height={'95%'}
-      onCancel={() => togglePortal(false)}
+      onCancel={() => clearPortalStack()}
       open={showMobilePortal}
       styles={{
         body: { padding: 0 },

package/src/app/[variants]/(main)/group/_layout/Sidebar/GroupConfig/GroupMember.tsx

@@ -11,6 +11,7 @@ import UserAvatar from '@/features/User/UserAvatar';
 import { useAgentGroupStore } from '@/store/agentGroup';
 import { agentGroupSelectors } from '@/store/agentGroup/selectors';
 import { useChatStore } from '@/store/chat';
+import { PortalViewType } from '@/store/chat/slices/portal/initialState';
 import { useUserStore } from '@/store/user';
 import { userProfileSelectors } from '@/store/user/slices/auth/selectors';
 
@@ -36,7 +37,7 @@ const GroupMember = memo<GroupMemberProps>(({ addModalOpen, onAddModalOpenChange
   const addAgentsToGroup = useAgentGroupStore((s) => s.addAgentsToGroup);
   const removeAgentFromGroup = useAgentGroupStore((s) => s.removeAgentFromGroup);
   const toggleThread = useAgentGroupStore((s) => s.toggleThread);
-  const togglePortal = useChatStore((s) => s.togglePortal);
+  const pushPortalView = useChatStore((s) => s.pushPortalView);
 
   // Get members from store (excluding supervisor)
   const groupMembers = useAgentGroupStore(agentGroupSelectors.getGroupMembers(groupId || ''));
@@ -76,7 +77,7 @@ const GroupMember = memo<GroupMemberProps>(({ addModalOpen, onAddModalOpenChange
 
   const handleMemberClick = (agentId: string) => {
     toggleThread(agentId);
-    togglePortal(true);
+    pushPortalView({ agentId, type: PortalViewType.GroupThread });
   };
 
   return (

package/src/app/[variants]/(main)/group/features/Conversation/ThreadHydration.tsx

@@ -6,6 +6,7 @@ import { createStoreUpdater } from 'zustand-utils';
 import { useFetchThreads } from '@/hooks/useFetchThreads';
 import { useQueryState } from '@/hooks/useQueryParam';
 import { useChatStore } from '@/store/chat';
+import { PortalViewType } from '@/store/chat/slices/portal/initialState';
 
 // sync outside state to useChatStore
 const ThreadHydration = memo(() => {
@@ -31,7 +32,7 @@ const ThreadHydration = memo(() => {
   // should open portal automatically when portalThread is set
   useEffect(() => {
     if (!!portalThread && !useChatStore.getState().showPortal) {
-      useChatStore.getState().togglePortal(true);
+      useChatStore.getState().pushPortalView({ threadId: portalThread, type: PortalViewType.Thread });
     }
   }, [portalThread]);
 

package/src/app/[variants]/(main)/group/features/Portal/_layout/Mobile.tsx

@@ -16,10 +16,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 }));
 
 const Layout = () => {
-  const [showMobilePortal, isPortalThread, togglePortal] = useChatStore((s) => [
+  const [showMobilePortal, isPortalThread, clearPortalStack] = useChatStore((s) => [
     s.showPortal,
     portalThreadSelectors.showThread(s),
-    s.togglePortal,
+    s.clearPortalStack,
   ]);
   const { t } = useTranslation('portal');
 
@@ -42,7 +42,7 @@ const Layout = () => {
       destroyOnHidden
       footer={null}
       height={'95%'}
-      onCancel={() => togglePortal(false)}
+      onCancel={() => clearPortalStack()}
       open={showMobilePortal}
       styles={{
         body: { padding: 0 },

package/src/app/[variants]/(main)/group/profile/features/MemberProfile/AgentTool.tsx

@@ -1,13 +1,16 @@
 'use client';
 
 import { AgentTool as SharedAgentTool } from '@/features/ProfileEditor';
+import { useGroupProfileStore } from '@/store/groupProfile';
 
 /**
  * AgentTool for group profile editor
  * - Uses default settings (no web browsing, no filterAvailableInWeb, uses metaList)
+ * - Passes agentId from group profile store to display the correct member's plugins
  */
 const AgentTool = () => {
-  return <SharedAgentTool />;
+  const agentId = useGroupProfileStore((s) => s.activeTabId);
+  return <SharedAgentTool agentId={agentId} />;
 };
 
 export default AgentTool;

package/src/features/Conversation/ChatList/index.tsx

@@ -63,7 +63,11 @@ const ChatList = memo<ChatListProps>(({ disableActionsBar, welcome, itemContent
   );
   const messagesInit = useConversationStore(dataSelectors.messagesInit);
 
-  if (!messagesInit) {
+  // When topicId is null (new conversation), show welcome directly without waiting for fetch
+  // because there's no server data to fetch - only local optimistic updates exist
+  const isNewConversation = !context.topicId;
+
+  if (!messagesInit && !isNewConversation) {
     return <SkeletonList />;
   }
 

package/src/features/Conversation/store/slices/data/action.test.ts

@@ -505,6 +505,48 @@ describe('DataSlice', () => {
       );
     });
 
+    it('should not fetch when topicId is null (new conversation state)', () => {
+      const store = createStore({
+        context: { agentId: 'test-session', topicId: null, threadId: null },
+      });
+
+      store.getState().useFetchMessages({
+        agentId: 'test-session',
+        topicId: null,
+        threadId: null,
+      });
+
+      // SWR should be called with null key when topicId is null
+      // This prevents fetching empty data that would overwrite local optimistic updates
+      expect(vi.mocked(useClientDataSWRWithSync)).toHaveBeenCalledWith(
+        null,
+        expect.any(Function),
+        expect.any(Object),
+      );
+
+      // messageService.getMessages should NOT be called
+      expect(messageService.getMessages).not.toHaveBeenCalled();
+    });
+
+    it('should not fetch when topicId is undefined (new conversation state)', () => {
+      const store = createStore({
+        context: { agentId: 'test-session', topicId: null, threadId: null },
+      });
+
+      store.getState().useFetchMessages({
+        agentId: 'test-session',
+        topicId: undefined as any,
+        threadId: null,
+      });
+
+      // SWR should be called with null key when topicId is undefined
+      expect(vi.mocked(useClientDataSWRWithSync)).toHaveBeenCalledWith(
+        null,
+        expect.any(Function),
+        expect.any(Object),
+      );
+    });
+
     it('should use different SWR keys for different threadIds', () => {
       const store1 = createStore({
         context: { agentId: 'session-1', topicId: 'topic-1', threadId: 'thread-1' },

package/src/features/Conversation/store/slices/data/action.ts

@@ -103,8 +103,9 @@ export const dataSlice: StateCreator<
   useFetchMessages: (context, skipFetch) => {
     // When skipFetch is true, SWR key is null - no fetch occurs
     // This is used when external messages are provided (e.g., creating new thread)
-    // Allow fetch if: has agentId (both agent topics and group topics have agentId)
-    const shouldFetch = !skipFetch && !!context.agentId;
+    // Also skip fetch when topicId is null (new conversation state) - there's no server data,
+    // only local optimistic updates. Fetching would return empty array and overwrite local data.
+    const shouldFetch = !skipFetch && !!context.agentId && !!context.topicId;
 
     return useClientDataSWRWithSync<UIChatMessage[]>(
       shouldFetch ? ['CONVERSATION_FETCH_MESSAGES', context] : null,

package/src/features/Portal/GroupThread/Header/index.tsx

@@ -12,10 +12,10 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
 const Header = memo(() => {
-  const togglePortal = useChatStore((s) => s.togglePortal);
+  const clearPortalStack = useChatStore((s) => s.clearPortalStack);
   const close = () => {
     useAgentGroupStore.setState({ activeThreadAgentId: '' });
-    togglePortal(false);
+    clearPortalStack();
   };
   const activeThreadAgentId = useAgentGroupStore((s) => s.activeThreadAgentId);
 

package/src/features/Portal/MessageDetail/Body/index.tsx

@@ -15,9 +15,9 @@ const md = css`
 `;
 
 const MessageDetailBody = () => {
-  const [messageDetailId, togglePortal] = useChatStore((s) => [
+  const [messageDetailId, clearPortalStack] = useChatStore((s) => [
     chatPortalSelectors.messageDetailId(s),
-    s.togglePortal,
+    s.clearPortalStack,
   ]);
 
   const message = useChatStore(dbMessageSelectors.getDbMessageById(messageDetailId || ''), isEqual);
@@ -26,7 +26,7 @@ const MessageDetailBody = () => {
 
   useEffect(() => {
     if (!message) {
-      togglePortal(false);
+      clearPortalStack();
     }
   }, [message]);
 

package/src/features/Portal/components/Header.tsx

@@ -10,10 +10,10 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/selectors';
 
 const Header = memo<{ title: ReactNode }>(({ title }) => {
-  const [canGoBack, goBack, togglePortal] = useChatStore((s) => [
+  const [canGoBack, goBack, clearPortalStack] = useChatStore((s) => [
     chatPortalSelectors.canGoBack(s),
     s.goBack,
-    s.togglePortal,
+    s.clearPortalStack,
   ]);
 
   return (
@@ -30,7 +30,7 @@ const Header = memo<{ title: ReactNode }>(({ title }) => {
         <ActionIcon
           icon={PanelRightCloseIcon}
           onClick={() => {
-            togglePortal(false);
+            clearPortalStack();
           }}
           size={DESKTOP_HEADER_ICON_SIZE}
         />

package/src/features/ProfileEditor/AgentTool.tsx

@@ -16,7 +16,7 @@ import PluginStore from '@/features/PluginStore';
 import { useCheckPluginsIsInstalled } from '@/hooks/useCheckPluginsIsInstalled';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { useAgentStore } from '@/store/agent';
-import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selectors';
+import { agentSelectors, chatConfigByIdSelectors } from '@/store/agent/selectors';
 import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
 import {
@@ -82,6 +82,11 @@ const KlavisIcon = memo<Pick<KlavisServerType, 'icon' | 'label'>>(({ icon, label
 });
 
 export interface AgentToolProps {
+  /**
+   * Optional agent ID to use instead of currentAgentConfig
+   * Used in group profile to specify which member's plugins to display
+   */
+  agentId?: string;
   /**
    * Whether to filter tools by availableInWeb property
    * @default false
@@ -100,15 +105,17 @@ export interface AgentToolProps {
 }
 
 const AgentTool = memo<AgentToolProps>(
-  ({ showWebBrowsing = false, filterAvailableInWeb = false, useAllMetaList = false }) => {
+  ({ agentId, showWebBrowsing = false, filterAvailableInWeb = false, useAllMetaList = false }) => {
     const { t } = useTranslation('setting');
-    const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
+    const activeAgentId = useAgentStore((s) => s.activeAgentId);
+    const effectiveAgentId = agentId || activeAgentId || '';
+    const config = useAgentStore(agentSelectors.getAgentConfigById(effectiveAgentId), isEqual);
 
     // Plugin state management
     const plugins = config?.plugins || [];
 
-    const toggleAgentPlugin = useAgentStore((s) => s.toggleAgentPlugin);
-    const updateAgentChatConfig = useAgentStore((s) => s.updateAgentChatConfig);
+    const updateAgentConfigById = useAgentStore((s) => s.updateAgentConfigById);
+    const updateAgentChatConfigById = useAgentStore((s) => s.updateAgentChatConfigById);
     const installedPluginList = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
 
     // Use appropriate builtin list based on prop
@@ -117,8 +124,8 @@ const AgentTool = memo<AgentToolProps>(
       isEqual,
     );
 
-    // Web browsing uses searchMode instead of plugins array
-    const isSearchEnabled = useAgentStore(agentChatConfigSelectors.isAgentEnableSearch);
+    // Web browsing uses searchMode instead of plugins array - use byId selector
+    const isSearchEnabled = useAgentStore(chatConfigByIdSelectors.isEnableSearchById(effectiveAgentId));
 
     // Klavis 相关状态
     const allKlavisServers = useToolStore(klavisStoreSelectors.getServers, isEqual);
@@ -144,11 +151,34 @@ const AgentTool = memo<AgentToolProps>(
     // 使用 SWR 加载用户的 Klavis 集成（从数据库）
     useFetchUserKlavisServers(isKlavisEnabledInEnv);
 
-    // Toggle web browsing via searchMode
+    // Toggle web browsing via searchMode - use byId action
     const toggleWebBrowsing = useCallback(async () => {
+      if (!effectiveAgentId) return;
       const nextMode = isSearchEnabled ? 'off' : 'auto';
-      await updateAgentChatConfig({ searchMode: nextMode });
-    }, [isSearchEnabled, updateAgentChatConfig]);
+      await updateAgentChatConfigById(effectiveAgentId, { searchMode: nextMode });
+    }, [isSearchEnabled, updateAgentChatConfigById, effectiveAgentId]);
+
+    // Toggle a plugin - use byId action
+    const togglePlugin = useCallback(
+      async (pluginId: string, state?: boolean) => {
+        if (!effectiveAgentId) return;
+        const currentPlugins = plugins;
+        const hasPlugin = currentPlugins.includes(pluginId);
+        const shouldEnable = state !== undefined ? state : !hasPlugin;
+
+        let newPlugins: string[];
+        if (shouldEnable && !hasPlugin) {
+          newPlugins = [...currentPlugins, pluginId];
+        } else if (!shouldEnable && hasPlugin) {
+          newPlugins = currentPlugins.filter((id) => id !== pluginId);
+        } else {
+          return;
+        }
+
+        await updateAgentConfigById(effectiveAgentId, { plugins: newPlugins });
+      },
+      [effectiveAgentId, plugins, updateAgentConfigById],
+    );
 
     // Check if a tool is enabled (handles web browsing specially)
     const isToolEnabled = useCallback(
@@ -167,10 +197,10 @@ const AgentTool = memo<AgentToolProps>(
         if (showWebBrowsing && identifier === WEB_BROWSING_IDENTIFIER) {
           await toggleWebBrowsing();
         } else {
-          await toggleAgentPlugin(identifier);
+          await togglePlugin(identifier);
         }
       },
-      [toggleWebBrowsing, toggleAgentPlugin, showWebBrowsing],
+      [toggleWebBrowsing, togglePlugin, showWebBrowsing],
     );
 
     // Set default tab based on installed plugins (only on first load)
@@ -240,7 +270,7 @@ const AgentTool = memo<AgentToolProps>(
       [isKlavisEnabledInEnv, allKlavisServers],
     );
 
-    // Handle plugin remove via Tag close
+    // Handle plugin remove via Tag close - use byId actions
     const handleRemovePlugin =
       (
         pluginId: string | { enabled: boolean; identifier: string; settings: Record<string, any> },
@@ -250,9 +280,10 @@ const AgentTool = memo<AgentToolProps>(
         e.stopPropagation();
         const identifier = typeof pluginId === 'string' ? pluginId : pluginId?.identifier;
         if (showWebBrowsing && identifier === WEB_BROWSING_IDENTIFIER) {
-          await updateAgentChatConfig({ searchMode: 'off' });
+          if (!effectiveAgentId) return;
+          await updateAgentChatConfigById(effectiveAgentId, { searchMode: 'off' });
         } else {
-          toggleAgentPlugin(identifier, false);
+          await togglePlugin(identifier, false);
         }
       };
 
@@ -304,13 +335,13 @@ const AgentTool = memo<AgentToolProps>(
               label={item.title}
               onUpdate={async () => {
                 setUpdating(true);
-                await toggleAgentPlugin(item.identifier);
+                await togglePlugin(item.identifier);
                 setUpdating(false);
               }}
             />
           ),
         })),
-      [installedPluginList, plugins, toggleAgentPlugin],
+      [installedPluginList, plugins, togglePlugin],
     );
 
     // All tab items (市场 tab)
@@ -411,7 +442,7 @@ const AgentTool = memo<AgentToolProps>(
               label={item.title}
               onUpdate={async () => {
                 setUpdating(true);
-                await toggleAgentPlugin(item.identifier);
+                await togglePlugin(item.identifier);
                 setUpdating(false);
               }}
             />
@@ -435,7 +466,7 @@ const AgentTool = memo<AgentToolProps>(
       plugins,
       isToolEnabled,
       handleToggleTool,
-      toggleAgentPlugin,
+      togglePlugin,
       t,
     ]);
 

package/src/hooks/useNavigateToAgent.ts

@@ -5,15 +5,15 @@ import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useChatStore } from '@/store/chat';
 
 export const useNavigateToAgent = () => {
-  const togglePortal = useChatStore((s) => s.togglePortal);
+  const clearPortalStack = useChatStore((s) => s.clearPortalStack);
   const router = useQueryRoute();
 
   return useCallback(
     (agentId: string) => {
-      togglePortal(false);
+      clearPortalStack();
 
       router.push(SESSION_CHAT_URL(agentId, false));
     },
-    [togglePortal, router],
+    [clearPortalStack, router],
   );
 };

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

@@ -268,45 +268,4 @@ describe('chatDockSlice', () => {
     });
   });
 
-  describe('toggleDock', () => {
-    it('should toggle dock state when no argument is provided', () => {
-      const { result } = renderHook(() => useChatStore());
-
-      expect(result.current.showPortal).toBe(false);
-
-      act(() => {
-        result.current.togglePortal();
-      });
-
-      expect(result.current.showPortal).toBe(true);
-
-      act(() => {
-        result.current.togglePortal();
-      });
-
-      expect(result.current.showPortal).toBe(false);
-    });
-
-    it('should set dock state to the provided value', () => {
-      const { result } = renderHook(() => useChatStore());
-
-      act(() => {
-        result.current.togglePortal(true);
-      });
-
-      expect(result.current.showPortal).toBe(true);
-
-      act(() => {
-        result.current.togglePortal(false);
-      });
-
-      expect(result.current.showPortal).toBe(false);
-
-      act(() => {
-        result.current.togglePortal(true);
-      });
-
-      expect(result.current.showPortal).toBe(true);
-    });
-  });
 });

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

@@ -28,7 +28,6 @@ export interface ChatPortalAction {
   pushPortalView: (view: PortalViewData) => void;
   replacePortalView: (view: PortalViewData) => void;
   toggleNotebook: (open?: boolean) => void;
-  togglePortal: (open?: boolean) => void;
 }
 
 // Helper to get current view type from stack
@@ -222,28 +221,4 @@ pushPortalView: (view) => {
       get().closeNotebook();
     }
   },
-
-  togglePortal: (open) => {
-    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');
-      }
-    }
-  },
 });

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

@@ -141,7 +141,7 @@ describe('thread action', () => {
   describe('openThreadCreator', () => {
     it('should set thread creator state and open portal', () => {
       const { result } = renderHook(() => useChatStore());
-      const togglePortalSpy = vi.spyOn(result.current, 'togglePortal');
+      const pushPortalViewSpy = vi.spyOn(result.current, 'pushPortalView');
 
       act(() => {
         result.current.openThreadCreator('message-id');
@@ -150,14 +150,14 @@ describe('thread action', () => {
       expect(result.current.threadStartMessageId).toBe('message-id');
       expect(result.current.portalThreadId).toBeUndefined();
       expect(result.current.startToForkThread).toBe(true);
-      expect(togglePortalSpy).toHaveBeenCalledWith(true);
+      expect(pushPortalViewSpy).toHaveBeenCalledWith({ type: 'thread', startMessageId: 'message-id' });
     });
   });
 
   describe('openThreadInPortal', () => {
     it('should set portal thread state and open portal', () => {
       const { result } = renderHook(() => useChatStore());
-      const togglePortalSpy = vi.spyOn(result.current, 'togglePortal');
+      const pushPortalViewSpy = vi.spyOn(result.current, 'pushPortalView');
 
       act(() => {
         result.current.openThreadInPortal('thread-id', 'source-message-id');
@@ -166,7 +166,11 @@ describe('thread action', () => {
       expect(result.current.portalThreadId).toBe('thread-id');
       expect(result.current.threadStartMessageId).toBe('source-message-id');
       expect(result.current.startToForkThread).toBe(false);
-      expect(togglePortalSpy).toHaveBeenCalledWith(true);
+      expect(pushPortalViewSpy).toHaveBeenCalledWith({
+        type: 'thread',
+        threadId: 'thread-id',
+        startMessageId: 'source-message-id',
+      });
     });
   });
 
@@ -182,7 +186,7 @@ describe('thread action', () => {
         });
       });
 
-      const togglePortalSpy = vi.spyOn(result.current, 'togglePortal');
+      const clearPortalStackSpy = vi.spyOn(result.current, 'clearPortalStack');
 
       act(() => {
         result.current.closeThreadPortal();
@@ -191,7 +195,7 @@ describe('thread action', () => {
       expect(result.current.portalThreadId).toBeUndefined();
       expect(result.current.threadStartMessageId).toBeUndefined();
       expect(result.current.startToForkThread).toBeUndefined();
-      expect(togglePortalSpy).toHaveBeenCalledWith(false);
+      expect(clearPortalStackSpy).toHaveBeenCalled();
     });
   });
 

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

@@ -19,6 +19,7 @@ import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
 import { displayMessageSelectors } from '../message/selectors';
+import { PortalViewType } from '../portal/initialState';
 import { type ThreadDispatch, threadReducer } from './reducer';
 import { genParentMessages } from './selectors';
 
@@ -88,7 +89,8 @@ export const chatThreadMessage: StateCreator<
       false,
       'openThreadCreator',
     );
-    get().togglePortal(true);
+    // Push Thread view to portal stack instead of togglePortal
+    get().pushPortalView({ type: PortalViewType.Thread, startMessageId: messageId });
   },
   openThreadInPortal: (threadId, sourceMessageId) => {
     set(
@@ -96,7 +98,12 @@ export const chatThreadMessage: StateCreator<
       false,
       'openThreadInPortal',
     );
-    get().togglePortal(true);
+    // Push Thread view to portal stack with threadId
+    get().pushPortalView({
+      type: PortalViewType.Thread,
+      threadId,
+      startMessageId: sourceMessageId ?? undefined,
+    });
   },
 
   closeThreadPortal: () => {
@@ -105,7 +112,7 @@ export const chatThreadMessage: StateCreator<
       false,
       'closeThreadPortal',
     );
-    get().togglePortal(false);
+    get().clearPortalStack();
   },
   createThread: async ({ message, sourceMessageId, topicId, type }) => {
     set({ isCreatingThread: true }, false, n('creatingThread/start'));

package/src/app/[variants]/(main)/group/features/Portal/features/Portal.tsx

@@ -1,105 +0,0 @@
-'use client';
-
-import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
-import { Flexbox } from '@lobehub/ui';
-import { createStaticStyles, useResponsive } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { Activity, type PropsWithChildren, memo, useState } from 'react';
-
-import {
-  CHAT_PORTAL_MAX_WIDTH,
-  CHAT_PORTAL_TOOL_UI_WIDTH,
-  CHAT_PORTAL_WIDTH,
-} from '@/const/layoutTokens';
-import { useChatStore } from '@/store/chat';
-import { chatPortalSelectors, portalThreadSelectors } from '@/store/chat/selectors';
-import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
-
-const styles = createStaticStyles(({ css, cssVar }) => ({
-  content: css`
-    display: flex;
-    flex-direction: column;
-    height: 100% !important;
-  `,
-  drawer: css`
-    z-index: 10;
-    height: 100%;
-    background: ${cssVar.colorBgContainer};
-  `,
-  panel: css`
-    overflow: hidden;
-    height: 100%;
-    background: ${cssVar.colorBgContainer};
-  `,
-}));
-
-const PortalPanel = memo(({ children }: PropsWithChildren) => {
-  const { md = true } = useResponsive();
-
-  const [showPortal, showToolUI, showArtifactUI, showThread] = useChatStore((s) => [
-    chatPortalSelectors.showPortal(s),
-    chatPortalSelectors.showPluginUI(s),
-    chatPortalSelectors.showArtifactUI(s),
-    portalThreadSelectors.showThread(s),
-  ]);
-
-  const [portalWidth, updateSystemStatus] = useGlobalStore((s) => [
-    systemStatusSelectors.portalWidth(s),
-    s.updateSystemStatus,
-  ]);
-
-  const [tmpWidth, setWidth] = useState(portalWidth);
-  if (tmpWidth !== portalWidth) setWidth(portalWidth);
-
-  const handleSizeChange: DraggablePanelProps['onSizeChange'] = (_, size) => {
-    if (!size) return;
-    const nextWidth = typeof size.width === 'string' ? Number.parseInt(size.width) : size.width;
-    if (!nextWidth) return;
-
-    if (isEqual(nextWidth, portalWidth)) return;
-    setWidth(nextWidth);
-    updateSystemStatus({ portalWidth: nextWidth });
-  };
-
-  return (
-    <DraggablePanel
-      className={styles.drawer}
-      classNames={{
-        content: styles.content,
-      }}
-      defaultSize={{ width: tmpWidth }}
-      expand={showPortal}
-      maxWidth={CHAT_PORTAL_MAX_WIDTH}
-      minWidth={
-        (showArtifactUI || showToolUI || showThread) && md
-          ? CHAT_PORTAL_TOOL_UI_WIDTH
-          : CHAT_PORTAL_WIDTH
-      }
-      mode={md ? 'fixed' : 'float'}
-      onSizeChange={handleSizeChange}
-      placement={'right'}
-      showHandleWhenCollapsed={false}
-      showHandleWideArea={false}
-      size={{ height: '100%', width: portalWidth }}
-      styles={{
-        handle: { display: 'none' },
-      }}
-    >
-      <DraggablePanelContainer
-        style={{
-          flex: 'none',
-          height: '100%',
-          maxHeight: '100vh',
-          minWidth: CHAT_PORTAL_WIDTH,
-        }}
-      >
-        <Activity mode={showPortal ? 'visible' : 'hidden'} name="GroupPortal">
-          <Flexbox className={styles.panel}>{children}</Flexbox>
-        </Activity>
-      </DraggablePanelContainer>
-    </DraggablePanel>
-  );
-});
-
-export default PortalPanel;

package/src/app/[variants]/(main)/group/features/Portal/features/PortalPanel.tsx

@@ -1,23 +0,0 @@
-import { Suspense, memo } from 'react';
-
-import DesktopLayout from '@/app/[variants]/(main)/group/features/Portal/_layout/Desktop';
-import MobileLayout from '@/app/[variants]/(main)/group/features/Portal/_layout/Mobile';
-import Loading from '@/components/Loading/BrandTextLoading';
-
-interface PortalPanelProps {
-  mobile?: boolean;
-}
-
-const PortalPanel = memo<PortalPanelProps>(({ mobile }) => {
-  const Layout = mobile ? MobileLayout : DesktopLayout;
-
-  return (
-    <Suspense fallback={<Loading debugId="PortalPanel" />}>
-      <Layout />
-    </Suspense>
-  );
-});
-
-PortalPanel.displayName = 'PortalPanel';
-
-export default PortalPanel;