Feat: Add RunSheet component #3221 (#8045)

### What problem does this PR solve?

Feat: Add RunSheet component #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/canvas/index.tsx

@@ -5,7 +5,7 @@ import {
   ReactFlow,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-// import ChatDrawer from '../chat/drawer';
+import { ChatSheet } from '../chat/chat-sheet';
 import FormSheet from '../form-sheet/next';
 import {
   useHandleDrop,
@@ -15,7 +15,7 @@ import {
 } from '../hooks';
 import { useBeforeDelete } from '../hooks/use-before-delete';
 import { useShowDrawer } from '../hooks/use-show-drawer';
-// import RunDrawer from '../run-drawer';
+import RunSheet from '../run-sheet';
 import { ButtonEdge } from './edge';
 import styles from './index.less';
 import { RagNode } from './node';
@@ -66,7 +66,7 @@ interface IProps {
   hideDrawer(): void;
 }
 
-function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
+function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
   const {
     nodes,
     edges,
@@ -165,21 +165,21 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
           showSingleDebugDrawer={showSingleDebugDrawer}
         ></FormSheet>
       )}
-      {/* {chatVisible && (
-        <ChatDrawer
+      {chatVisible && (
+        <ChatSheet
           visible={chatVisible}
           hideModal={hideRunOrChatDrawer}
-        ></ChatDrawer>
+        ></ChatSheet>
       )}
 
       {runVisible && (
-        <RunDrawer
+        <RunSheet
           hideModal={hideRunOrChatDrawer}
           showModal={showChatModal}
-        ></RunDrawer>
-      )} */}
+        ></RunSheet>
+      )}
     </div>
   );
 }
 
-export default FlowCanvas;
+export default AgentCanvas;