From 40b1684c1e499e6acba96bbc68e4f810e94c16ae Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 30 Jun 2025 15:39:38 +0800
Subject: [PATCH] Feat: Fixed the issue that the top toolbar disappears when
 opening the agent operator form #3221 (#8579)

### What problem does this PR solve?

Feat: Fixed the issue that the top toolbar disappears when opening the
agent operator form #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/app.tsx                       |  2 +-
 web/src/pages/agent/canvas/index.less |  2 +-
 web/src/pages/agent/canvas/index.tsx  |  1 +
 web/src/pages/agent/index.tsx         | 19 +++++--------------
 4 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/web/src/app.tsx b/web/src/app.tsx
index 1ea4025b6..538b33147 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -78,7 +78,7 @@ function Root({ children }: React.PropsWithChildren) {
         }}
         locale={locale}
       >
-        <SidebarProvider>
+        <SidebarProvider className="h-full">
           <App>{children}</App>
         </SidebarProvider>
         <Sonner position={'top-right'} expand richColors closeButton></Sonner>
diff --git a/web/src/pages/agent/canvas/index.less b/web/src/pages/agent/canvas/index.less
index 21f72e150..0183d41b5 100644
--- a/web/src/pages/agent/canvas/index.less
+++ b/web/src/pages/agent/canvas/index.less
@@ -1,6 +1,6 @@
 .canvasWrapper {
   position: relative;
-  height: 100%;
+  height: calc(100% - 64px);
   :global(.react-flow__node-group) {
     .commonNode();
     border-radius: 0 0 10px 10px;
diff --git a/web/src/pages/agent/canvas/index.tsx b/web/src/pages/agent/canvas/index.tsx
index 8360f6704..9972f9385 100644
--- a/web/src/pages/agent/canvas/index.tsx
+++ b/web/src/pages/agent/canvas/index.tsx
@@ -174,6 +174,7 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
           isValidConnection={isValidConnection}
           onEdgeMouseEnter={onEdgeMouseEnter}
           onEdgeMouseLeave={onEdgeMouseLeave}
+          className="h-full"
           defaultEdgeOptions={{
             type: 'buttonEdge',
             markerEnd: 'logo',
diff --git a/web/src/pages/agent/index.tsx b/web/src/pages/agent/index.tsx
index bdf51fcc1..4b47fb5cb 100644
--- a/web/src/pages/agent/index.tsx
+++ b/web/src/pages/agent/index.tsx
@@ -7,7 +7,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { SidebarProvider } from '@/components/ui/sidebar';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { ReactFlowProvider } from '@xyflow/react';
@@ -70,7 +69,7 @@ export default function Agent() {
   }, [getBeginNodeDataQuery, handleRun, showChatDrawer]);
 
   return (
-    <section>
+    <section className="h-full">
       <PageHeader back={navigateToAgentList} title={flowDetail.title}>
         <div className="flex items-center gap-2">
           <ButtonLoading
@@ -116,18 +115,10 @@ export default function Agent() {
         </div>
       </PageHeader>
       <ReactFlowProvider>
-        <div>
-          <SidebarProvider>
-            <div className="w-full">
-              <div className="w-full h-full">
-                <AgentCanvas
-                  drawerVisible={chatDrawerVisible}
-                  hideDrawer={hideChatDrawer}
-                ></AgentCanvas>
-              </div>
-            </div>
-          </SidebarProvider>
-        </div>
+        <AgentCanvas
+          drawerVisible={chatDrawerVisible}
+          hideDrawer={hideChatDrawer}
+        ></AgentCanvas>
       </ReactFlowProvider>
       {fileUploadVisible && (
         <UploadAgentDialog