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

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);

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>(

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,
   };
 }