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

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

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;

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',

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>
+        <AgentCanvas
-          <SidebarProvider>
+          drawerVisible={chatDrawerVisible}
-            <div className="w-full">
+          hideDrawer={hideChatDrawer}
-              <div className="w-full h-full">
+        ></AgentCanvas>
-                <AgentCanvas
-                  drawerVisible={chatDrawerVisible}
-                  hideDrawer={hideChatDrawer}
-                ></AgentCanvas>
-              </div>
-            </div>
-          </SidebarProvider>
-        </div>
       </ReactFlowProvider>
       {fileUploadVisible && (
         <UploadAgentDialog