dify/web/app/components/workflow/skill/hooks/use-skill-shortcuts.ts

'use client'

import type { RefObject } from 'react'
import type { TreeApi } from 'react-arborist'
import type { TreeNodeData } from '../type'
import { useKeyPress } from 'ahooks'
import { useCallback, useEffect, useRef } from 'react'
import { useWorkflowStore } from '@/app/components/workflow/store'
import {
  getKeyboardKeyCodeBySystem,
  isEventTargetInputArea,
} from '@/app/components/workflow/utils/common'

type UseSkillShortcutsOptions = {
  treeRef: RefObject<TreeApi<TreeNodeData> | null>
  enabled?: boolean
}

export function useSkillShortcuts({
  treeRef,
  enabled = true,
}: UseSkillShortcutsOptions): void {
  const storeApi = useWorkflowStore()
  const enabledRef = useRef(enabled)
  useEffect(() => { enabledRef.current = enabled }, [enabled])

  const shouldHandle = useCallback((e: KeyboardEvent) => {
    if (!enabledRef.current)
      return false
    return !isEventTargetInputArea(e.target as HTMLElement)
  }, [])

  const getSelectedNodeIds = useCallback(() => {
    const tree = treeRef.current
    if (!tree)
      return []
    return tree.selectedNodes.map(n => n.id)
  }, [treeRef])

  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.c`, (e) => {
    if (shouldHandle(e)) {
      const nodeIds = getSelectedNodeIds()
      if (nodeIds.length > 0) {
        e.preventDefault()
        storeApi.getState().copyNodes(nodeIds)
      }
    }
  }, { exactMatch: true, useCapture: true })

  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.x`, (e) => {
    if (shouldHandle(e)) {
      const nodeIds = getSelectedNodeIds()
      if (nodeIds.length > 0) {
        e.preventDefault()
        storeApi.getState().cutNodes(nodeIds)
      }
    }
  }, { exactMatch: true, useCapture: true })

  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.v`, (e) => {
    if (shouldHandle(e) && storeApi.getState().hasClipboard()) {
      e.preventDefault()
      window.dispatchEvent(new CustomEvent('skill:paste'))
    }
  }, { exactMatch: true, useCapture: true })
}