feat: add CategorizeHandle #918 (#1282)

### What problem does this PR solve?

feat: add CategorizeHandle #918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/canvas/node/categorize-handle.tsx

@@ -0,0 +1,39 @@
+import { Handle, Position } from 'reactflow';
+// import { v4 as uuid } from 'uuid';
+
+import styles from './index.less';
+
+const DEFAULT_HANDLE_STYLE = {
+  width: 6,
+  height: 6,
+  bottom: -5,
+  fontSize: 8,
+};
+
+interface IProps {
+  top: number;
+  right: number;
+  text: string;
+  idx: number;
+}
+
+const CategorizeHandle = ({ top, right, text, idx }: IProps) => {
+  return (
+    <Handle
+      type="source"
+      position={Position.Right}
+      id={`CategorizeHandle${idx}`}
+      isConnectable
+      style={{
+        ...DEFAULT_HANDLE_STYLE,
+        top: `${top}%`,
+        right: `${right}%`,
+        background: 'red',
+      }}
+    >
+      <span className={styles.categorizeAnchorPointText}>{text}</span>
+    </Handle>
+  );
+};
+
+export default CategorizeHandle;

web/src/pages/flow/canvas/node/index.less

@@ -37,6 +37,12 @@
       -3px 0 6px -4px rgba(0, 0, 0, 0.12),
       -6px 0 16px 6px rgba(0, 0, 0, 0.05);
   }
+  .categorizeAnchorPointText {
+    position: absolute;
+    top: -4px;
+    left: 8px;
+    white-space: nowrap;
+  }
 }
 .selectedNode {
   border: 1px solid rgb(59, 118, 244);

web/src/pages/flow/canvas/node/index.tsx

@@ -4,12 +4,14 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import OperateDropdown from '@/components/operate-dropdown';
 import { CopyOutlined } from '@ant-design/icons';
 import { Flex, MenuProps, Space } from 'antd';
+import get from 'lodash/get';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Operator, operatorMap } from '../../constant';
+import { CategorizeAnchorPointPositions, Operator } from '../../constant';
 import { NodeData } from '../../interface';
 import OperatorIcon from '../../operator-icon';
 import useGraphStore from '../../store';
+import CategorizeHandle from './categorize-handle';
 import styles from './index.less';
 
 export function RagNode({
@@ -30,7 +32,8 @@ export function RagNode({
     duplicateNodeById(id);
   }, [id, duplicateNodeById]);
 
-  const description = operatorMap[data.label as Operator].description;
+  const isCategorize = data.label === Operator.Categorize;
+  const categoryData = get(data, 'form.category_description') ?? {};
 
   const items: MenuProps['items'] = [
     {
@@ -57,9 +60,7 @@ export function RagNode({
         position={Position.Left}
         isConnectable={isConnectable}
         className={styles.handle}
-      >
-        {/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
-      </Handle>
+      ></Handle>
       <Handle type="source" position={Position.Top} id="d" isConnectable />
       <Handle
         type="source"
@@ -67,34 +68,32 @@ export function RagNode({
         isConnectable={isConnectable}
         className={styles.handle}
         id="b"
-      >
-        {/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
-      </Handle>
+      ></Handle>
       <Handle type="source" position={Position.Bottom} id="a" isConnectable />
+      {isCategorize &&
+        Object.keys(categoryData).map((x, idx) => (
+          <CategorizeHandle
+            top={CategorizeAnchorPointPositions[idx].top}
+            right={CategorizeAnchorPointPositions[idx].right}
+            key={idx}
+            text={x}
+            idx={idx}
+          ></CategorizeHandle>
+        ))}
       <Flex vertical align="center" justify="center">
         <Space size={6}>
           <OperatorIcon
             name={data.label as Operator}
             fontSize={16}
           ></OperatorIcon>
-          {/* {data.label} */}
           <OperateDropdown
             iconFontSize={14}
             deleteItem={deleteNode}
             items={items}
           ></OperateDropdown>
         </Space>
-        {/* <div className={styles.nodeName}>{id}</div> */}
       </Flex>
-      {/* <div>
-        <Text
-          ellipsis={{ tooltip: description }}
-          style={{ width: 130 }}
-          className={styles.description}
-        >
-          {description}
-        </Text>
-      </div> */}
+
       <section className={styles.bottomBox}>
         <div className={styles.nodeName}>{id}</div>
       </section>