feat: Add hint for operators, round to square, input variable, readable operator ID. #3056 (#3057)

### What problem does this PR solve?

feat: Add hint for operators, round to square, input variable, readable
operator ID. #3056

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/components/svg-icon.tsx

@@ -1,5 +1,8 @@
-import Icon from '@ant-design/icons';
+import { IconMap } from '@/constants/setting';
+import Icon, { UserOutlined } from '@ant-design/icons';
 import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
+import { Avatar } from 'antd';
+import { AvatarSize } from 'antd/es/avatar/AvatarContext';
 
 const importAll = (requireContext: __WebpackModuleApi.RequireContext) => {
   const list = requireContext.keys().map((key) => {
@@ -36,4 +39,24 @@ const SvgIcon = ({ name, width, height, ...restProps }: IProps) => {
   );
 };
 
+export const LlmIcon = ({
+  name,
+  height = 48,
+  width = 48,
+  size = 'large',
+}: {
+  name: string;
+  height?: number;
+  width?: number;
+  size?: AvatarSize;
+}) => {
+  const icon = IconMap[name as keyof typeof IconMap];
+
+  return icon ? (
+    <SvgIcon name={`llm/${icon}`} width={width} height={height}></SvgIcon>
+  ) : (
+    <Avatar shape="square" size={size} icon={<UserOutlined />} />
+  );
+};
+
 export default SvgIcon;