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/pages/user-setting/setting-model/index.tsx

@@ -1,14 +1,9 @@
 import { ReactComponent as MoreModelIcon } from '@/assets/svg/more-model.svg';
-import SvgIcon from '@/components/svg-icon';
+import { LlmIcon } from '@/components/svg-icon';
 import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
 import { LlmItem, useSelectLlmList } from '@/hooks/llm-hooks';
+import { CloseCircleOutlined, SettingOutlined } from '@ant-design/icons';
 import {
-  CloseCircleOutlined,
-  SettingOutlined,
-  UserOutlined,
-} from '@ant-design/icons';
-import {
-  Avatar,
   Button,
   Card,
   Col,
@@ -31,7 +26,6 @@ import TencentCloudModal from './Tencent-modal';
 import ApiKeyModal from './api-key-modal';
 import AzureOpenAIModal from './azure-openai-modal';
 import BedrockModal from './bedrock-modal';
-import { IconMap } from './constant';
 import FishAudioModal from './fish-audio-modal';
 import GoogleModal from './google-modal';
 import {
@@ -58,16 +52,6 @@ import SystemModelSettingModal from './system-model-setting-modal';
 import VolcEngineModal from './volcengine-modal';
 import YiyanModal from './yiyan-modal';
 
-const LlmIcon = ({ name }: { name: string }) => {
-  const icon = IconMap[name as keyof typeof IconMap];
-
-  return icon ? (
-    <SvgIcon name={`llm/${icon}`} width={48} height={48}></SvgIcon>
-  ) : (
-    <Avatar shape="square" size="large" icon={<UserOutlined />} />
-  );
-};
-
 const { Text } = Typography;
 interface IModelCardProps {
   item: LlmItem;