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

@@ -233,6 +233,7 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
             node={clickedNode}
             visible={formDrawerVisible}
             hideModal={hideFormDrawer}
+            chatVisible={chatVisible}
             singleDebugDrawerVisible={singleDebugDrawerVisible}
             hideSingleDebugDrawer={hideSingleDebugDrawer}
             showSingleDebugDrawer={showSingleDebugDrawer}

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>

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();
       }
     },
-    [
+    [hideSingleDebugDrawer, showFormDrawer, showSingleDebugDrawer],
-      hideRunOrChatDrawer,
-      hideSingleDebugDrawer,
-      showFormDrawer,
-      showSingleDebugDrawer,
-    ],
   );
 
   return {

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" />