From 36513313f859185a2b5c9d31fdca45265a08073f Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Tue, 31 Mar 2026 16:18:43 +0800
Subject: [PATCH] Fix: The agent form sheet will be obscured by the message log
 sheet. (#13870)

### What problem does this PR solve?

Fix: The agent form sheet will be obscured by the message log sheet.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/pages/agent/canvas/index.tsx          | 26 +++++++++----------
 web/src/pages/agent/context.ts                |  6 ++---
 web/src/pages/agent/hooks/use-show-drawer.tsx | 25 ++++++++++++++++--
 3 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/web/src/pages/agent/canvas/index.tsx b/web/src/pages/agent/canvas/index.tsx
index 074bd828a7..ecac6a71dd 100644
--- a/web/src/pages/agent/canvas/index.tsx
+++ b/web/src/pages/agent/canvas/index.tsx
@@ -44,7 +44,6 @@ import { useNodeLoading } from '../hooks/use-node-loading';
 import {
   useHideFormSheetOnNodeDeletion,
   useShowDrawer,
-  useShowLogSheet,
 } from '../hooks/use-show-drawer';
 import { useStopMessageUnmount } from '../hooks/use-stop-message';
 import { LogSheet } from '../log-sheet';
@@ -133,6 +132,15 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
   const [reactFlowInstance, setReactFlowInstance] =
     useState<ReactFlowInstance<any, any>>();
 
+  const {
+    addEventList,
+    setCurrentMessageId,
+    currentEventListWithoutMessageById,
+    clearEventList,
+    currentMessageId,
+    latestTaskId,
+  } = useCacheChatLog();
+
   const {
     onNodeClick,
     clickedNode,
@@ -146,25 +154,17 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
     hideRunOrChatDrawer,
     showChatModal,
     showFormDrawer,
+    logSheetVisible,
+    showLogSheet,
+    hideLogSheet,
   } = useShowDrawer({
     drawerVisible,
     hideDrawer,
-  });
-
-  const {
-    addEventList,
     setCurrentMessageId,
-    currentEventListWithoutMessageById,
-    clearEventList,
-    currentMessageId,
-    latestTaskId,
-  } = useCacheChatLog();
+  });
 
   const { stopMessage } = useStopMessageUnmount(chatVisible, latestTaskId);
 
-  const { showLogSheet, logSheetVisible, hideLogSheet } = useShowLogSheet({
-    setCurrentMessageId,
-  });
   const [lastSendLoading, setLastSendLoading] = useState(false);
 
   const [currentSendLoading, setCurrentSendLoading] = useState(false);
diff --git a/web/src/pages/agent/context.ts b/web/src/pages/agent/context.ts
index 2012fb7329..bba54e3272 100644
--- a/web/src/pages/agent/context.ts
+++ b/web/src/pages/agent/context.ts
@@ -16,9 +16,9 @@ type AgentInstanceContextType = Pick<
   'addCanvasNode'
 > &
   Pick<ReturnType<typeof useShowFormDrawer>, 'showFormDrawer'> & {
-    lastNode: INodeEvent | null;
-    currentSendLoading: boolean;
-    startButNotFinishedNodeIds: string[];
+    lastNode?: INodeEvent | null;
+    currentSendLoading?: boolean;
+    startButNotFinishedNodeIds?: string[];
   };
 
 export const AgentInstanceContext = createContext<AgentInstanceContextType>(
diff --git a/web/src/pages/agent/hooks/use-show-drawer.tsx b/web/src/pages/agent/hooks/use-show-drawer.tsx
index 3a15b29b89..d6d2fa2255 100644
--- a/web/src/pages/agent/hooks/use-show-drawer.tsx
+++ b/web/src/pages/agent/hooks/use-show-drawer.tsx
@@ -76,10 +76,11 @@ const ExcludedNodes = [Operator.Note, Operator.Placeholder, Operator.File];
 export function useShowDrawer({
   drawerVisible,
   hideDrawer,
+  setCurrentMessageId,
 }: {
   drawerVisible: boolean;
   hideDrawer(): void;
-}) {
+} & Pick<ReturnType<typeof useCacheChatLog>, 'setCurrentMessageId'>) {
   const {
     visible: runVisible,
     showModal: showRunModal,
@@ -98,6 +99,9 @@ export function useShowDrawer({
   const { formDrawerVisible, hideFormDrawer, showFormDrawer, clickedNode } =
     useShowFormDrawer();
   const inputs = useGetBeginNodeDataInputs();
+  const { showLogSheet, logSheetVisible, hideLogSheet } = useShowLogSheet({
+    setCurrentMessageId,
+  });
 
   useEffect(() => {
     if (drawerVisible) {
@@ -133,6 +137,7 @@ export function useShowDrawer({
       if (!ExcludedNodes.some((x) => x === node.data.label)) {
         hideSingleDebugDrawer();
         // hideRunOrChatDrawer();
+        hideLogSheet();
         showFormDrawer(e, node.id);
       }
       // handle single debug icon click
@@ -143,7 +148,20 @@ export function useShowDrawer({
         showSingleDebugDrawer();
       }
     },
-    [hideSingleDebugDrawer, showFormDrawer, showSingleDebugDrawer],
+    [
+      hideLogSheet,
+      hideSingleDebugDrawer,
+      showFormDrawer,
+      showSingleDebugDrawer,
+    ],
+  );
+
+  const showLogSheetExclusive = useCallback(
+    (messageId: string) => {
+      hideFormDrawer();
+      showLogSheet(messageId);
+    },
+    [hideFormDrawer, showLogSheet],
   );
 
   return {
@@ -160,6 +178,9 @@ export function useShowDrawer({
     hideFormDrawer,
     hideRunOrChatDrawer,
     showChatModal,
+    showLogSheet: showLogSheetExclusive,
+    logSheetVisible,
+    hideLogSheet,
   };
 }