feat: restrict classification operators cannot be connected to Answer and other classification #918 (#1294)

### What problem does this PR solve?

feat: restrict classification operators cannot be connected to Answer
and other classification #918

### Type of change

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

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

@@ -0,0 +1,39 @@
+import { Flex, Space } from 'antd';
+import classNames from 'classnames';
+import { Handle, NodeProps, Position } from 'reactflow';
+import { Operator } from '../../constant';
+import { NodeData } from '../../interface';
+import OperatorIcon from '../../operator-icon';
+import NodeDropdown from './dropdown';
+
+import styles from './index.less';
+
+// TODO: do not allow other nodes to connect to this node
+export function BeginNode({ id, data, selected }: NodeProps<NodeData>) {
+  return (
+    <section
+      className={classNames(styles.ragNode, {
+        [styles.selectedNode]: selected,
+      })}
+    >
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable
+        className={styles.handle}
+      ></Handle>
+      <Flex vertical align="center" justify="center">
+        <Space size={6}>
+          <OperatorIcon
+            name={data.label as Operator}
+            fontSize={16}
+          ></OperatorIcon>
+          <NodeDropdown id={id}></NodeDropdown>
+        </Space>
+      </Flex>
+      <section className={styles.bottomBox}>
+        <div className={styles.nodeName}>{id}</div>
+      </section>
+    </section>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { Flex, Space } from 'antd';
+import classNames from 'classnames';
+import get from 'lodash/get';
+import { Handle, NodeProps, Position } from 'reactflow';
+import { CategorizeAnchorPointPositions, Operator } 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';
+
+export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
+  const categoryData = get(data, 'form.category_description') ?? {};
+
+  return (
+    <section
+      className={classNames(styles.ragNode, {
+        [styles.selectedNode]: selected,
+      })}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        isConnectable
+        className={styles.handle}
+      ></Handle>
+      {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>
+          <NodeDropdown id={id}></NodeDropdown>
+        </Space>
+      </Flex>
+      <section className={styles.bottomBox}>
+        <div className={styles.nodeName}>{id}</div>
+      </section>
+    </section>
+  );
+}

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

@@ -0,0 +1,47 @@
+import OperateDropdown from '@/components/operate-dropdown';
+import { CopyOutlined } from '@ant-design/icons';
+import { Flex, MenuProps } from 'antd';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import useGraphStore from '../../store';
+
+interface IProps {
+  id: string;
+}
+
+const NodeDropdown = ({ id }: IProps) => {
+  const { t } = useTranslation();
+  const deleteNodeById = useGraphStore((store) => store.deleteNodeById);
+  const duplicateNodeById = useGraphStore((store) => store.duplicateNode);
+
+  const deleteNode = useCallback(() => {
+    deleteNodeById(id);
+  }, [id, deleteNodeById]);
+
+  const duplicateNode = useCallback(() => {
+    duplicateNodeById(id);
+  }, [id, duplicateNodeById]);
+
+  const items: MenuProps['items'] = [
+    {
+      key: '2',
+      onClick: duplicateNode,
+      label: (
+        <Flex justify={'space-between'}>
+          {t('common.copy')}
+          <CopyOutlined />
+        </Flex>
+      ),
+    },
+  ];
+
+  return (
+    <OperateDropdown
+      iconFontSize={14}
+      deleteItem={deleteNode}
+      items={items}
+    ></OperateDropdown>
+  );
+};
+
+export default NodeDropdown;

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

@@ -1,17 +1,13 @@
 import classNames from 'classnames';
 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 { Flex, Space } from 'antd';
 import get from 'lodash/get';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 import { CategorizeAnchorPointPositions, Operator } from '../../constant';
 import { NodeData } from '../../interface';
 import OperatorIcon from '../../operator-icon';
-import useGraphStore from '../../store';
 import CategorizeHandle from './categorize-handle';
+import NodeDropdown from './dropdown';
 import styles from './index.less';
 
 export function RagNode({
@@ -20,34 +16,9 @@ export function RagNode({
   isConnectable = true,
   selected,
 }: NodeProps<NodeData>) {
-  const { t } = useTranslation();
-  const deleteNodeById = useGraphStore((store) => store.deleteNodeById);
-  const duplicateNodeById = useGraphStore((store) => store.duplicateNode);
-
-  const deleteNode = useCallback(() => {
-    deleteNodeById(id);
-  }, [id, deleteNodeById]);
-
-  const duplicateNode = useCallback(() => {
-    duplicateNodeById(id);
-  }, [id, duplicateNodeById]);
-
   const isCategorize = data.label === Operator.Categorize;
   const categoryData = get(data, 'form.category_description') ?? {};
 
-  const items: MenuProps['items'] = [
-    {
-      key: '2',
-      onClick: duplicateNode,
-      label: (
-        <Flex justify={'space-between'}>
-          {t('common.copy')}
-          <CopyOutlined />
-        </Flex>
-      ),
-    },
-  ];
-
   return (
     <section
       className={classNames(styles.ragNode, {
@@ -86,11 +57,7 @@ export function RagNode({
             name={data.label as Operator}
             fontSize={16}
           ></OperatorIcon>
-          <OperateDropdown
-            iconFontSize={14}
-            deleteItem={deleteNode}
-            items={items}
-          ></OperateDropdown>
+          <NodeDropdown id={id}></NodeDropdown>
         </Space>
       </Flex>