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/flow/canvas/node/categorize-node.tsx

@@ -1,22 +1,17 @@
-import { useTranslate } from '@/hooks/common-hooks';
+import LLMLabel from '@/components/llm-select/llm-label';
 import { Flex } from 'antd';
 import classNames from 'classnames';
-import lowerFirst from 'lodash/lowerFirst';
+import { get } from 'lodash';
 import { Handle, NodeProps, Position } from 'reactflow';
-import { Operator, SwitchElseTo, operatorMap } from '../../constant';
 import { NodeData } from '../../interface';
-import OperatorIcon from '../../operator-icon';
-import CategorizeHandle from './categorize-handle';
-import NodeDropdown from './dropdown';
+import { RightHandleStyle } from './handle-icon';
 import { useBuildCategorizeHandlePositions } from './hooks';
 import styles from './index.less';
+import NodeHeader from './node-header';
 import NodePopover from './popover';
 
 export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
-  const style = operatorMap[data.label as Operator];
-  const { t } = useTranslate('flow');
   const { positions } = useBuildCategorizeHandlePositions({ data, id });
-  const operatorName = data.label;
 
   return (
     <NodePopover nodeId={id}>
@@ -24,10 +19,6 @@ export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
         className={classNames(styles.logicNode, {
           [styles.selectedNode]: selected,
         })}
-        style={{
-          backgroundColor: style.backgroundColor,
-          color: style.color,
-        }}
       >
         <Handle
           type="target"
@@ -36,47 +27,35 @@ export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
           className={styles.handle}
           id={'a'}
         ></Handle>
-        <Handle
-          type="target"
-          position={Position.Top}
-          isConnectable
-          className={styles.handle}
-          id={'b'}
-        ></Handle>
-        <Handle
-          type="target"
-          position={Position.Bottom}
-          isConnectable
-          className={styles.handle}
-          id={'c'}
-        ></Handle>
-        {operatorName === Operator.Switch && (
-          <CategorizeHandle top={50} right={-4} id={SwitchElseTo}>
-            To
-          </CategorizeHandle>
-        )}
-        {positions.map((position, idx) => {
-          return (
-            <CategorizeHandle
-              top={position.top}
-              right={position.right}
-              key={idx}
-              id={position.text}
-              idx={idx}
-            ></CategorizeHandle>
-          );
-        })}
-        <Flex vertical align="center" justify="center" gap={6}>
-          <OperatorIcon
-            name={data.label as Operator}
-            fontSize={24}
-          ></OperatorIcon>
-          <span className={styles.type}>{t(lowerFirst(data.label))}</span>
-          <NodeDropdown id={id}></NodeDropdown>
+
+        <NodeHeader
+          id={id}
+          name={data.name}
+          label={data.label}
+          className={styles.nodeHeader}
+        ></NodeHeader>
+
+        <Flex vertical gap={8}>
+          <div className={styles.nodeText}>
+            <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
+          </div>
+          {positions.map((position, idx) => {
+            return (
+              <div key={idx}>
+                <div className={styles.nodeText}>{position.text}</div>
+                <Handle
+                  key={position.text}
+                  id={position.text}
+                  type="source"
+                  position={Position.Right}
+                  isConnectable
+                  className={styles.handle}
+                  style={{ ...RightHandleStyle, top: position.top }}
+                ></Handle>
+              </div>
+            );
+          })}
         </Flex>
-        <section className={styles.bottomBox}>
-          <div className={styles.nodeName}>{data.name}</div>
-        </section>
       </section>
     </NodePopover>
   );