feat: add RelevantForm #918 (#1344)

### What problem does this PR solve?

feat: add RelevantForm #918

### Type of change

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

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

@@ -23,11 +23,13 @@ import ChatDrawer from '../chat/drawer';
 import styles from './index.less';
 import { BeginNode } from './node/begin-node';
 import { CategorizeNode } from './node/categorize-node';
+import { RelevantNode } from './node/relevant-node';
 
 const nodeTypes = {
   ragNode: RagNode,
   categorizeNode: CategorizeNode,
   beginNode: BeginNode,
+  relevantNode: RelevantNode,
 };
 
 const edgeTypes = {

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

@@ -14,7 +14,7 @@ interface IProps {
   top: number;
   right: number;
   text: string;
-  idx: number;
+  idx?: number;
 }
 
 const CategorizeHandle = ({ top, right, text, idx }: IProps) => {
@@ -30,6 +30,7 @@ const CategorizeHandle = ({ top, right, text, idx }: IProps) => {
         top: `${top}%`,
         right: `${right}%`,
         background: 'red',
+        color: 'black',
       }}
     >
       <span className={styles.categorizeAnchorPointText}>{text}</span>

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

@@ -1,16 +1,10 @@
 import { Flex } from 'antd';
 import classNames from 'classnames';
-import get from 'lodash/get';
 import pick from 'lodash/pick';
 import { Handle, NodeProps, Position } from 'reactflow';
-import {
-  CategorizeAnchorPointPositions,
-  Operator,
-  operatorMap,
-} from '../../constant';
+import { Operator, operatorMap } from '../../constant';
 import { NodeData } from '../../interface';
 import OperatorIcon from '../../operator-icon';
-import CategorizeHandle from './categorize-handle';
 import NodeDropdown from './dropdown';
 import styles from './index.less';
 
@@ -20,8 +14,6 @@ export function RagNode({
   isConnectable = true,
   selected,
 }: NodeProps<NodeData>) {
-  const isCategorize = data.label === Operator.Categorize;
-  const categoryData = get(data, 'form.category_description') ?? {};
   const style = operatorMap[data.label as Operator];
 
   return (
@@ -47,16 +39,6 @@ export function RagNode({
         id="b"
       ></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'} gap={6}>
         <OperatorIcon
           name={data.label as Operator}

web/src/pages/flow/canvas/node/relevant-node.tsx

@@ -0,0 +1,64 @@
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import pick from 'lodash/pick';
+import { Handle, NodeProps, Position } from 'reactflow';
+import { Operator, operatorMap } from '../../constant';
+import { NodeData } from '../../interface';
+import OperatorIcon from '../../operator-icon';
+import NodeDropdown from './dropdown';
+
+import CategorizeHandle from './categorize-handle';
+import styles from './index.less';
+
+export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
+  const style = operatorMap[data.label as Operator];
+
+  return (
+    <section
+      className={classNames(styles.ragNode, {
+        [styles.selectedNode]: selected,
+      })}
+      style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        isConnectable
+        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>
+      <CategorizeHandle top={20} right={6} text={'yes'}></CategorizeHandle>
+      <CategorizeHandle top={80} right={6} text={'no'}></CategorizeHandle>
+      <Flex vertical align="center" justify="center">
+        <OperatorIcon
+          name={data.label as Operator}
+          fontSize={style.iconFontSize}
+        ></OperatorIcon>
+        <span
+          className={styles.type}
+          style={{ fontSize: style.fontSize ?? 14 }}
+        >
+          {data.label}
+        </span>
+        <NodeDropdown id={id}></NodeDropdown>
+      </Flex>
+      <section className={styles.bottomBox}>
+        <div className={styles.nodeName}>{data.name}</div>
+      </section>
+    </section>
+  );
+}