dify/web/app/components/workflow/edge-contextmenu.tsx

import { ContextMenuContent, ContextMenuItem } from '@langgenius/dify-ui/context-menu'
import { useTranslation } from 'react-i18next'
import { useEdges } from 'reactflow'
import { useEdgesInteractions } from './hooks'
import { ShortcutKbd } from './shortcuts/shortcut-kbd'
import { useStore } from './store'

export function EdgeContextmenu({ onClose }: { onClose: () => void }) {
  const { t } = useTranslation()
  const contextMenuTarget = useStore((s) => s.contextMenuTarget)
  const edgeId = contextMenuTarget?.type === 'edge' ? contextMenuTarget.edgeId : undefined
  const { handleEdgeDeleteById } = useEdgesInteractions()
  const edges = useEdges()
  const currentEdgeExists = !edgeId || edges.some((edge) => edge.id === edgeId)

  if (!edgeId || !currentEdgeExists) return null

  return (
    <ContextMenuContent popupClassName="rounded-lg" sideOffset={4}>
      <ContextMenuItem
        variant="destructive"
        className="justify-between gap-4 px-3"
        onClick={() => {
          handleEdgeDeleteById(edgeId)
          onClose()
        }}
      >
        <span>{t(($) => $['operation.delete'], { ns: 'common' })}</span>
        <ShortcutKbd shortcut="workflow.delete" />
      </ContextMenuItem>
    </ContextMenuContent>
  )
}