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/llm-select/index.less

@@ -0,0 +1,3 @@
+.llmLabel {
+  font-size: 14px;
+}

web/src/components/llm-select/index.tsx

@@ -7,9 +7,10 @@ interface IProps {
   id?: string;
   value?: string;
   onChange?: (value: string) => void;
+  disabled?: boolean;
 }
 
-const LLMSelect = ({ id, value, onChange }: IProps) => {
+const LLMSelect = ({ id, value, onChange, disabled }: IProps) => {
   const modelOptions = useComposeLlmOptionsByModelTypes([
     LlmModelType.Chat,
     LlmModelType.Image2text,
@@ -38,6 +39,7 @@ const LLMSelect = ({ id, value, onChange }: IProps) => {
         id={id}
         value={value}
         onChange={onChange}
+        disabled={disabled}
       />
     </Popover>
   );

web/src/components/llm-select/llm-label.tsx

@@ -0,0 +1,31 @@
+import { LlmModelType } from '@/constants/knowledge';
+import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
+import { useMemo } from 'react';
+
+interface IProps {
+  id?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+}
+
+const LLMLabel = ({ value }: IProps) => {
+  const modelOptions = useComposeLlmOptionsByModelTypes([
+    LlmModelType.Chat,
+    LlmModelType.Image2text,
+  ]);
+
+  const label = useMemo(() => {
+    for (const item of modelOptions) {
+      for (const option of item.options) {
+        if (option.value === value) {
+          return option.label;
+        }
+      }
+    }
+  }, [modelOptions, value]);
+
+  return <div>{label}</div>;
+};
+
+export default LLMLabel;