feat: Automatically save agent page data #3301 (#3302)

### What problem does this PR solve?

feat: Automatically save agent page data #3301

### Type of change


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

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

@@ -128,6 +128,9 @@ function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) {
         onSelectionChange={onSelectionChange}
         nodeOrigin={[0.5, 0]}
         isValidConnection={isValidConnection}
+        onChangeCapture={(...params) => {
+          console.info('onChangeCapture:', ...params);
+        }}
         onChange={(...params) => {
           console.info('params:', ...params);
         }}
@@ -140,18 +143,6 @@ function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) {
           },
         }}
         deleteKeyCode={['Delete', 'Backspace']}
-        onPaste={(...params) => {
-          console.info('onPaste:', ...params);
-        }}
-        onPasteCapture={(...params) => {
-          console.info('onPasteCapture:', ...params);
-        }}
-        onCopy={(...params) => {
-          console.info('onCopy:', ...params);
-        }}
-        onCopyCapture={(...params) => {
-          console.info('onCopyCapture:', ...params);
-        }}
       >
         <Background />
         <Controls />

web/src/pages/flow/canvas/node/relevant-node.tsx

@@ -5,12 +5,15 @@ import { NodeData } from '../../interface';
 import { RightHandleStyle } from './handle-icon';
 
 import { get } from 'lodash';
+import { useReplaceIdWithName } from '../../hooks';
 import styles from './index.less';
 import NodeHeader from './node-header';
 
 export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
   const yes = get(data, 'form.yes');
   const no = get(data, 'form.no');
+  const replaceIdWithName = useReplaceIdWithName();
+
   return (
     <section
       className={classNames(styles.logicNode, {
@@ -50,11 +53,11 @@ export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
       <Flex vertical gap={10}>
         <Flex vertical>
           <div className={styles.relevantLabel}>Yes</div>
-          <div className={styles.nodeText}>{yes}</div>
+          <div className={styles.nodeText}>{replaceIdWithName(yes)}</div>
         </Flex>
         <Flex vertical>
           <div className={styles.relevantLabel}>No</div>
-          <div className={styles.nodeText}>{no}</div>
+          <div className={styles.nodeText}>{replaceIdWithName(no)}</div>
         </Flex>
       </Flex>
     </section>