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/knowledge-base-item.tsx

@@ -1,6 +1,7 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
-import { Form, Select } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
+import { Avatar, Form, Select, Space } from 'antd';
 
 const KnowledgeBaseItem = () => {
   const { t } = useTranslate('chat');
@@ -8,7 +9,12 @@ const KnowledgeBaseItem = () => {
   const { list: knowledgeList } = useNextFetchKnowledgeList(true);
 
   const knowledgeOptions = knowledgeList.map((x) => ({
-    label: x.name,
+    label: (
+      <Space>
+        <Avatar size={20} icon={<UserOutlined />} src={x.avatar} />
+        {x.name}
+      </Space>
+    ),
     value: x.id,
   }));
 

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;

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;