diff --git a/packages/frontend/core/src/desktop/pages/workspace/chat/index.tsx b/packages/frontend/core/src/desktop/pages/workspace/chat/index.tsx
index f4bdc5c7f6..933a9f610c 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/chat/index.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/chat/index.tsx
@@ -148,6 +148,15 @@ export const Component = () => {
     }
   }, [client, createSession, currentSession, isTogglingPin, workspaceId]);
 
+  // remove the old content to trigger re-mount
+  // to avoid infinitely load and mount, should not make `chatContent` as dependency
+  const reMountChatContent = useCallback(() => {
+    setChatContent(prev => {
+      prev?.remove();
+      return null;
+    });
+  }, []);
+
   const onOpenSession = useCallback(
     (sessionId: string) => {
       if (isOpeningSession) return;
@@ -156,10 +165,7 @@ export const Component = () => {
         .getSession(workspaceId, sessionId)
         .then(session => {
           setCurrentSession(session);
-          if (chatContent) {
-            chatContent.remove();
-            setChatContent(null);
-          }
+          reMountChatContent();
           chatTool?.closeHistoryMenu();
         })
         .catch(console.error)
@@ -167,7 +173,7 @@ export const Component = () => {
           setIsOpeningSession(false);
         });
     },
-    [chatContent, chatTool, client, isOpeningSession, workspaceId]
+    [chatTool, client, isOpeningSession, reMountChatContent, workspaceId]
   );
 
   const onContextChange = useCallback((context: Partial<ChatContextValue>) => {
@@ -246,7 +252,7 @@ export const Component = () => {
 
   // init or update header ai-chat-toolbar
   useEffect(() => {
-    if (!isHeaderProvided || !chatToolContainerRef.current || !chatContent) {
+    if (!isHeaderProvided || !chatToolContainerRef.current) {
       return;
     }
     let tool = chatTool;
@@ -268,8 +274,7 @@ export const Component = () => {
     tool.onNewSession = () => {
       if (!currentSession) return;
       setCurrentSession(null);
-      chatContent?.remove();
-      setChatContent(null);
+      reMountChatContent();
     };
 
     tool.onTogglePin = async () => {
@@ -291,7 +296,6 @@ export const Component = () => {
       setChatTool(tool);
     }
   }, [
-    chatContent,
     chatTool,
     currentSession,
     docDisplayConfig,
@@ -302,6 +306,7 @@ export const Component = () => {
     confirmModal,
     framework,
     status,
+    reMountChatContent,
   ]);
 
   useEffect(() => {
@@ -322,8 +327,6 @@ export const Component = () => {
 
   // restore pinned session
   useEffect(() => {
-    if (!chatContent) return;
-
     const controller = new AbortController();
     const signal = controller.signal;
     client
@@ -339,10 +342,7 @@ export const Component = () => {
         const session = sessions[0];
         if (!session) return;
         setCurrentSession(session);
-        if (chatContent) {
-          chatContent.remove();
-          setChatContent(null);
-        }
+        reMountChatContent();
       })
       .catch(console.error);
 
@@ -350,7 +350,7 @@ export const Component = () => {
     return () => {
       controller.abort();
     };
-  }, [chatContent, client, workspaceId]);
+  }, [client, reMountChatContent, workspaceId]);
 
   const onChatContainerRef = useCallback((node: HTMLDivElement) => {
     if (node) {