From 2e0905d06a1a148aa7a65c51abb2f0d180ad09b8 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 10 Jul 2025 13:48:12 +0800
Subject: [PATCH] Feat: Avoid the form sheet covering the chat sheet #3221
 (#8768)

### What problem does this PR solve?

Feat: Avoid the form sheet covering the chat sheet #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/pages/agent/canvas/index.tsx          | 1 +
 web/src/pages/agent/form-sheet/next.tsx       | 6 +++++-
 web/src/pages/agent/hooks/use-show-drawer.tsx | 9 ++-------
 web/src/pages/agent/log-sheet/index.tsx       | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/src/pages/agent/canvas/index.tsx b/web/src/pages/agent/canvas/index.tsx
index 61c4caa75..eff633ea6 100644
--- a/web/src/pages/agent/canvas/index.tsx
+++ b/web/src/pages/agent/canvas/index.tsx
@@ -233,6 +233,7 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
             node={clickedNode}
             visible={formDrawerVisible}
             hideModal={hideFormDrawer}
+            chatVisible={chatVisible}
             singleDebugDrawerVisible={singleDebugDrawerVisible}
             hideSingleDebugDrawer={hideSingleDebugDrawer}
             showSingleDebugDrawer={showSingleDebugDrawer}
diff --git a/web/src/pages/agent/form-sheet/next.tsx b/web/src/pages/agent/form-sheet/next.tsx
index 96ea78ff4..39794bfca 100644
--- a/web/src/pages/agent/form-sheet/next.tsx
+++ b/web/src/pages/agent/form-sheet/next.tsx
@@ -25,6 +25,7 @@ interface IProps {
   singleDebugDrawerVisible: IModalProps<any>['visible'];
   hideSingleDebugDrawer: IModalProps<any>['hideModal'];
   showSingleDebugDrawer: IModalProps<any>['showModal'];
+  chatVisible: boolean;
 }
 
 const EmptyContent = () => <div></div>;
@@ -34,6 +35,7 @@ const FormSheet = ({
   hideModal,
   node,
   singleDebugDrawerVisible,
+  chatVisible,
   hideSingleDebugDrawer,
   showSingleDebugDrawer,
 }: IModalProps<any> & IProps) => {
@@ -55,7 +57,9 @@ const FormSheet = ({
   return (
     <Sheet open={visible} modal={false}>
       <SheetContent
-        className={cn('top-20 p-0 flex flex-col pb-20')}
+        className={cn('top-20 p-0 flex flex-col pb-20', {
+          'right-[620px]': chatVisible,
+        })}
         closeIcon={false}
       >
         <SheetHeader>
diff --git a/web/src/pages/agent/hooks/use-show-drawer.tsx b/web/src/pages/agent/hooks/use-show-drawer.tsx
index b45863b79..69f90c68e 100644
--- a/web/src/pages/agent/hooks/use-show-drawer.tsx
+++ b/web/src/pages/agent/hooks/use-show-drawer.tsx
@@ -119,7 +119,7 @@ export function useShowDrawer({
     (e, node) => {
       if (!ExcludedNodes.some((x) => x === node.data.label)) {
         hideSingleDebugDrawer();
-        hideRunOrChatDrawer();
+        // hideRunOrChatDrawer();
         showFormDrawer(e, node);
       }
       // handle single debug icon click
@@ -130,12 +130,7 @@ export function useShowDrawer({
         showSingleDebugDrawer();
       }
     },
-    [
-      hideRunOrChatDrawer,
-      hideSingleDebugDrawer,
-      showFormDrawer,
-      showSingleDebugDrawer,
-    ],
+    [hideSingleDebugDrawer, showFormDrawer, showSingleDebugDrawer],
   );
 
   return {
diff --git a/web/src/pages/agent/log-sheet/index.tsx b/web/src/pages/agent/log-sheet/index.tsx
index 11ffe7ffc..3722310d4 100644
--- a/web/src/pages/agent/log-sheet/index.tsx
+++ b/web/src/pages/agent/log-sheet/index.tsx
@@ -149,7 +149,7 @@ export function LogSheet({
 
   return (
     <Sheet open onOpenChange={hideModal} modal={false}>
-      <SheetContent className="top-20 right-[440px]">
+      <SheetContent className="top-20 right-[620px]">
         <SheetHeader>
           <SheetTitle className="flex items-center gap-1">
             <NotebookText className="size-4" />