File size: 2,990 Bytes
be99f83 dcce454 ddd1aa2 4a674c0 97cc326 36669dc ddd1aa2 4a674c0 36669dc 04225e2 454aa85 ddd1aa2 36669dc dcce454 ddd1aa2 dcce454 be99f83 04225e2 4a674c0 ddd1aa2 4a674c0 ddd1aa2 4a674c0 36669dc 4a674c0 dcce454 454aa85 ddd1aa2 be99f83 dcce454 438f028 78dc980 dcce454 be99f83 36669dc 438f028 dcce454 78dc980 dcce454 be99f83 438f028 36669dc 438f028 36669dc 97cc326 ddd1aa2 454aa85 97cc326 454aa85 97cc326 454aa85 ddd1aa2 36669dc 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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
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 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 styles from './index.less';
export function RagNode({
id,
data,
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, {
[styles.selectedNode]: selected,
})}
>
<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">
<Space size={6}>
<OperatorIcon
name={data.label as Operator}
fontSize={16}
></OperatorIcon>
<OperateDropdown
iconFontSize={14}
deleteItem={deleteNode}
items={items}
></OperateDropdown>
</Space>
</Flex>
<section className={styles.bottomBox}>
<div className={styles.nodeName}>{id}</div>
</section>
</section>
);
}
|