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/context-menu/index.tsx

@@ -63,6 +63,8 @@ export function NodeContextMenu({
   );
 }
 
+/*  @deprecated
+ */
 export const useHandleNodeContextMenu = (sideWidth: number) => {
   const [menu, setMenu] = useState<INodeContextMenu>({} as INodeContextMenu);
   const ref = useRef<any>(null);

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

@@ -8,7 +8,6 @@ import ReactFlow, {
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 
-import { NodeContextMenu, useHandleNodeContextMenu } from './context-menu';
 import { ButtonEdge } from './edge';
 
 import FlowDrawer from '../flow-drawer';
@@ -30,12 +29,11 @@ const edgeTypes = {
 };
 
 interface IProps {
-  sideWidth: number;
   chatDrawerVisible: boolean;
   hideChatDrawer(): void;
 }
 
-function FlowCanvas({ sideWidth, chatDrawerVisible, hideChatDrawer }: IProps) {
+function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) {
   const {
     nodes,
     edges,
@@ -45,8 +43,6 @@ function FlowCanvas({ sideWidth, chatDrawerVisible, hideChatDrawer }: IProps) {
     onSelectionChange,
   } = useSelectCanvasData();
 
-  const { ref, menu, onNodeContextMenu, onPaneClick } =
-    useHandleNodeContextMenu(sideWidth);
   const { drawerVisible, hideDrawer, showDrawer, clickedNode } =
     useShowDrawer();
 
@@ -64,18 +60,15 @@ function FlowCanvas({ sideWidth, chatDrawerVisible, hideChatDrawer }: IProps) {
   return (
     <div className={styles.canvasWrapper}>
       <ReactFlow
-        ref={ref}
         connectionMode={ConnectionMode.Loose}
         nodes={nodes}
         onNodesChange={onNodesChange}
-        onNodeContextMenu={onNodeContextMenu}
         edges={edges}
         onEdgesChange={onEdgesChange}
         fitView
         onConnect={onConnect}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
-        onPaneClick={onPaneClick}
         onDrop={onDrop}
         onDragOver={onDragOver}
         onNodeClick={onNodeClick}
@@ -95,9 +88,6 @@ function FlowCanvas({ sideWidth, chatDrawerVisible, hideChatDrawer }: IProps) {
       >
         <Background />
         <Controls />
-        {Object.keys(menu).length > 0 && (
-          <NodeContextMenu onClick={onPaneClick} {...(menu as any)} />
-        )}
       </ReactFlow>
       <FlowDrawer
         node={clickedNode}

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>
   );