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/operator-icon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Operator, operatorIconMap } from './constant';
+
+interface IProps {
+  name: Operator;
+  fontSize?: number;
+  width?: number;
+  color?: string;
+}
+
+const OperatorIcon = ({ name, fontSize, width, color }: IProps) => {
+  const Icon = operatorIconMap[name] || React.Fragment;
+  return (
+    <Icon
+      className={'text-2xl max-h-6 max-w-6 text-[rgb(59, 118, 244)]'}
+      style={{ fontSize, color }}
+      width={width}
+    ></Icon>
+  );
+};
+
+export default OperatorIcon;