Feat: Render agent details #3221 (#5307)

### What problem does this PR solve?

Feat: Render agent details #3221
### Type of change


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

web/src/pages/agent/canvas/node/categorize-handle.tsx

@@ -0,0 +1,40 @@
+import { Handle, Position } from '@xyflow/react';
+
+import React from 'react';
+import styles from './index.less';
+
+const DEFAULT_HANDLE_STYLE = {
+  width: 6,
+  height: 6,
+  bottom: -5,
+  fontSize: 8,
+};
+
+interface IProps extends React.PropsWithChildren {
+  top: number;
+  right: number;
+  id: string;
+  idx?: number;
+}
+
+const CategorizeHandle = ({ top, right, id, children }: IProps) => {
+  return (
+    <Handle
+      type="source"
+      position={Position.Right}
+      id={id}
+      isConnectable
+      style={{
+        ...DEFAULT_HANDLE_STYLE,
+        top: `${top}%`,
+        right: `${right}%`,
+        background: 'red',
+        color: 'black',
+      }}
+    >
+      <span className={styles.categorizeAnchorPointText}>{children || id}</span>
+    </Handle>
+  );
+};
+
+export default CategorizeHandle;