File size: 2,372 Bytes
f43283a be99f83 36669dc f43283a 04225e2 454aa85 36669dc 457b4e6 dcce454 ddd1aa2 dcce454 be99f83 04225e2 36669dc f43283a 4a674c0 dcce454 454aa85 ddd1aa2 be99f83 f43283a be99f83 dcce454 438f028 78dc980 dcce454 be99f83 36669dc 438f028 dcce454 78dc980 dcce454 be99f83 438f028 36669dc 438f028 36669dc f43283a ddd1aa2 36669dc 97cc326 2653e84 97cc326 454aa85 dcce454 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
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 { NodeData } from '../../interface';
import OperatorIcon from '../../operator-icon';
import CategorizeHandle from './categorize-handle';
import NodeDropdown from './dropdown';
import styles from './index.less';
export function RagNode({
id,
data,
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 (
<section
className={classNames(styles.ragNode, {
[styles.selectedNode]: selected,
})}
style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
>
<Handle
id="c"
type="source"
position={Position.Left}
isConnectable={isConnectable}
className={styles.handle}
></Handle>
<Handle type="source" position={Position.Top} id="d" isConnectable />
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
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}
fontSize={style['iconFontSize'] ?? 24}
></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>
);
}
|