File size: 2,764 Bytes
be99f83 dcce454 ddd1aa2 4a674c0 ddd1aa2 4a674c0 ddd1aa2 454aa85 ddd1aa2 dcce454 4a674c0 ddd1aa2 dcce454 be99f83 78dc980 4a674c0 ddd1aa2 4a674c0 ddd1aa2 4a674c0 dcce454 454aa85 ddd1aa2 be99f83 dcce454 438f028 78dc980 dcce454 be99f83 438f028 dcce454 78dc980 dcce454 be99f83 438f028 be99f83 438f028 ddd1aa2 454aa85 ddd1aa2 454aa85 ddd1aa2 4a674c0 ddd1aa2 4a674c0 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 |
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, Typography } from 'antd';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Operator, operatorMap } from '../../constant';
import OperatorIcon from '../../operator-icon';
import useGraphStore from '../../store';
import styles from './index.less';
const { Text } = Typography;
export function RagNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<{ label: string }>) {
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 description = operatorMap[data.label as Operator].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}
>
{/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
</Handle>
<Handle type="source" position={Position.Top} id="d" isConnectable />
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
id="b"
>
{/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
</Handle>
<Handle type="source" position={Position.Bottom} id="a" isConnectable />
<Flex gap={10} justify={'space-between'}>
<Space size={6}>
<OperatorIcon
name={data.label as Operator}
fontSize={12}
></OperatorIcon>
<span>{data.label}</span>
</Space>
<OperateDropdown
iconFontSize={14}
deleteItem={deleteNode}
items={items}
></OperateDropdown>
</Flex>
<div>
<Text
ellipsis={{ tooltip: description }}
style={{ width: 130 }}
className={styles.description}
>
{description}
</Text>
</div>
</section>
);
}
|