feat: duplicate node #918 (#1136)

### What problem does this PR solve?
feat: duplicate node #918


### Type of change


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

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

@@ -2,24 +2,50 @@ import classNames from 'classnames';
 import { Handle, NodeProps, Position } from 'reactflow';
 
 import OperateDropdown from '@/components/operate-dropdown';
-import { Flex, Space } from 'antd';
+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, {
@@ -57,10 +83,17 @@ export function RagNode({
         <OperateDropdown
           iconFontSize={14}
           deleteItem={deleteNode}
+          items={items}
         ></OperateDropdown>
       </Flex>
-      <div className={styles.description}>
-        {operatorMap[data.label as Operator].description}
+      <div>
+        <Text
+          ellipsis={{ tooltip: description }}
+          style={{ width: 130 }}
+          className={styles.description}
+        >
+          {description}
+        </Text>
       </div>
     </section>
   );