add "add block" shortcut ui

web/app/components/workflow/hooks/use-panel-interactions.ts

@@ -5,7 +5,7 @@ import { useWorkflowStore } from '../store'
 export const usePanelInteractions = () => {
   const workflowStore = useWorkflowStore()
 
-  const handlePaneContextMenu = useCallback((e: MouseEvent) => {
+  const handlePanelContextMenu = useCallback((e: MouseEvent) => {
     e.preventDefault()
     const container = document.querySelector('#workflow-container')
     const { x, y } = container!.getBoundingClientRect()
@@ -17,7 +17,7 @@ export const usePanelInteractions = () => {
     })
   }, [workflowStore])
 
-  const handlePaneContextmenuCancel = useCallback(() => {
+  const handlePanelContextmenuCancel = useCallback(() => {
     workflowStore.setState({
       panelMenu: undefined,
     })
@@ -30,8 +30,8 @@ export const usePanelInteractions = () => {
   }, [workflowStore])
 
   return {
-    handlePaneContextMenu,
-    handlePaneContextmenuCancel,
+    handlePanelContextMenu,
+    handlePanelContextmenuCancel,
     handleNodeContextmenuCancel,
   }
 }

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

@@ -90,6 +90,13 @@ export const useShortcuts = (): void => {
     }
   }, { exactMatch: true, useCapture: true })
 
+  useKeyPress(`${getKeyboardKeyCodeBySystem('shift')}.a`, (e) => {
+    if (shouldHandleShortcut(e)) {
+      e.preventDefault()
+      workflowStore.setState({ showAddBlock: true })
+    }
+  }, { exactMatch: true, useCapture: true })
+
   useKeyPress(`${getKeyboardKeyCodeBySystem('alt')}.r`, (e) => {
     if (shouldHandleShortcut(e)) {
       e.preventDefault()

web/app/components/workflow/index.tsx

@@ -239,8 +239,8 @@ const Workflow: FC<WorkflowProps> = memo(({
     handleSelectionDrag,
   } = useSelectionInteractions()
   const {
-    handlePaneContextMenu,
-    handlePaneContextmenuCancel,
+    handlePanelContextMenu,
+    handlePanelContextmenuCancel,
   } = usePanelInteractions()
   const {
     isValidConnection,
@@ -304,7 +304,7 @@ const Workflow: FC<WorkflowProps> = memo(({
           <UpdateDSLModal
             onCancel={() => setShowImportDSLModal(false)}
             onBackup={exportCheck}
-            onImport={handlePaneContextmenuCancel}
+            onImport={handlePanelContextmenuCancel}
           />
         )
       }
@@ -338,7 +338,7 @@ const Workflow: FC<WorkflowProps> = memo(({
         onSelectionStart={handleSelectionStart}
         onSelectionChange={handleSelectionChange}
         onSelectionDrag={handleSelectionDrag}
-        onPaneContextMenu={handlePaneContextMenu}
+        onPaneContextMenu={handlePanelContextMenu}
         connectionLineComponent={CustomConnectionLine}
         connectionLineContainerStyle={{ zIndex: ITERATION_CHILDREN_Z_INDEX }}
         defaultViewport={viewport}

web/app/components/workflow/node-contextmenu.tsx

@@ -13,14 +13,14 @@ import { usePanelInteractions } from './hooks'
 const NodeContextmenu = () => {
   const ref = useRef(null)
   const nodes = useNodes()
-  const { handleNodeContextmenuCancel, handlePaneContextmenuCancel } = usePanelInteractions()
+  const { handleNodeContextmenuCancel, handlePanelContextmenuCancel } = usePanelInteractions()
   const nodeMenu = useStore(s => s.nodeMenu)
   const currentNode = nodes.find(node => node.id === nodeMenu?.nodeId) as Node
 
   useEffect(() => {
     if (nodeMenu)
-      handlePaneContextmenuCancel()
-  }, [nodeMenu, handlePaneContextmenuCancel])
+      handlePanelContextmenuCancel()
+  }, [nodeMenu, handlePanelContextmenuCancel])
 
   useClickAway(() => {
     handleNodeContextmenuCancel()

web/app/components/workflow/operator/add-block.tsx

@@ -1,58 +1,61 @@
-import {
-  memo,
-  useCallback,
-  useState,
-} from 'react'
+import React, { memo, useCallback, useEffect, useState } from 'react'
 import { RiAddCircleFill } from '@remixicon/react'
 import { useStoreApi } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import type { OffsetOptions } from '@floating-ui/react'
-import {
-  generateNewNode,
-} from '../utils'
+import { generateNewNode } from '../utils'
 import {
   useAvailableBlocks,
   useNodesReadOnly,
   usePanelInteractions,
 } from '../hooks'
 import { NODES_INITIAL_DATA } from '../constants'
-import { useWorkflowStore } from '../store'
+import { useStore, useWorkflowStore } from '../store'
 import TipPopup from './tip-popup'
 import cn from '@/utils/classnames'
 import BlockSelector from '@/app/components/workflow/block-selector'
-import type {
-  OnSelectBlock,
-} from '@/app/components/workflow/types'
-import {
-  BlockEnum,
-} from '@/app/components/workflow/types'
+import type { OnSelectBlock } from '@/app/components/workflow/types'
+import { BlockEnum } from '@/app/components/workflow/types'
 
 type AddBlockProps = {
   renderTrigger?: (open: boolean) => React.ReactNode
   offset?: OffsetOptions
+  useShortcut?: boolean
 }
+
 const AddBlock = ({
   renderTrigger,
   offset,
+  useShortcut = false,
 }: AddBlockProps) => {
   const { t } = useTranslation()
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
   const { nodesReadOnly } = useNodesReadOnly()
-  const { handlePaneContextmenuCancel } = usePanelInteractions()
-  const [open, setOpen] = useState(false)
+  const { handlePanelContextmenuCancel } = usePanelInteractions()
   const { availableNextBlocks } = useAvailableBlocks(BlockEnum.Start, false)
 
+  const showAddBlock = useStore(state => state.showAddBlock)
+  const setShowAddBlock = useStore(state => state.setShowAddBlock)
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    if (useShortcut && showAddBlock)
+      setIsOpen(true)
+  }, [useShortcut, showAddBlock])
+
   const handleOpenChange = useCallback((open: boolean) => {
-    setOpen(open)
+    setIsOpen(open)
+    if (useShortcut)
+      setShowAddBlock(open)
+
     if (!open)
-      handlePaneContextmenuCancel()
-  }, [handlePaneContextmenuCancel])
+      handlePanelContextmenuCancel()
+  }, [useShortcut, setShowAddBlock, handlePanelContextmenuCancel])
 
   const handleSelect = useCallback<OnSelectBlock>((type, toolDefaultValue) => {
-    const {
-      getNodes,
-    } = store.getState()
+    const { getNodes } = store.getState()
     const nodes = getNodes()
     const nodesWithSameType = nodes.filter(node => node.data.type === type)
     const newNode = generateNewNode({
@@ -67,16 +70,12 @@ const AddBlock = ({
         y: 0,
       },
     })
-    workflowStore.setState({
-      candidateNode: newNode,
-    })
+    workflowStore.setState({ candidateNode: newNode })
   }, [store, workflowStore, t])
 
   const renderTriggerElement = useCallback((open: boolean) => {
     return (
-      <TipPopup
-        title={t('workflow.common.addBlock')}
-      >
+      <TipPopup title={t('workflow.common.addBlock')} shortcuts={['shift', 'a']}>
         <div className={cn(
           'flex items-center justify-center w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer',
           `${nodesReadOnly && '!cursor-not-allowed opacity-50'}`,
@@ -90,7 +89,7 @@ const AddBlock = ({
 
   return (
     <BlockSelector
-      open={open}
+      open={isOpen}
       onOpenChange={handleOpenChange}
       disabled={nodesReadOnly}
       onSelect={handleSelect}

web/app/components/workflow/operator/control.tsx

@@ -44,7 +44,9 @@ const Control = () => {
 
   return (
     <div className='flex items-center p-0.5 rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg text-gray-500'>
-      <AddBlock />
+      <AddBlock
+        useShortcut={true}
+      />
       <TipPopup title={t('workflow.nodes.note.addNote')}>
         <div
           className={cn(

web/app/components/workflow/panel-contextmenu.tsx

@@ -24,7 +24,7 @@ const PanelContextmenu = () => {
   const clipboardElements = useStore(s => s.clipboardElements)
   const setShowImportDSLModal = useStore(s => s.setShowImportDSLModal)
   const { handleNodesPaste } = useNodesInteractions()
-  const { handlePaneContextmenuCancel, handleNodeContextmenuCancel } = usePanelInteractions()
+  const { handlePanelContextmenuCancel, handleNodeContextmenuCancel } = usePanelInteractions()
   const { handleStartWorkflowRun } = useWorkflowStartRun()
   const { handleAddNote } = useOperator()
   const { exportCheck } = useDSL()
@@ -35,7 +35,7 @@ const PanelContextmenu = () => {
   }, [panelMenu, handleNodeContextmenuCancel])
 
   useClickAway(() => {
-    handlePaneContextmenuCancel()
+    handlePanelContextmenuCancel()
   }, ref)
 
   const renderTrigger = () => {
@@ -44,6 +44,7 @@ const PanelContextmenu = () => {
         className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
       >
         {t('workflow.common.addBlock')}
+        <ShortcutsName keys={['shift', 'a']} />
       </div>
     )
   }
@@ -67,13 +68,14 @@ const PanelContextmenu = () => {
             mainAxis: -36,
             crossAxis: -4,
           }}
+          useShortcut={false}
         />
         <div
           className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
           onClick={(e) => {
             e.stopPropagation()
             handleAddNote()
-            handlePaneContextmenuCancel()
+            handlePanelContextmenuCancel()
           }}
         >
           {t('workflow.nodes.note.addNote')}
@@ -82,7 +84,7 @@ const PanelContextmenu = () => {
           className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
           onClick={() => {
             handleStartWorkflowRun()
-            handlePaneContextmenuCancel()
+            handlePanelContextmenuCancel()
           }}
         >
           {t('workflow.common.run')}
@@ -99,7 +101,7 @@ const PanelContextmenu = () => {
           onClick={() => {
             if (clipboardElements.length) {
               handleNodesPaste()
-              handlePaneContextmenuCancel()
+              handlePanelContextmenuCancel()
             }
           }}
         >

web/app/components/workflow/store.ts

@@ -162,6 +162,8 @@ type Shape = {
   setControlPromptEditorRerenderKey: (controlPromptEditorRerenderKey: number) => void
   showImportDSLModal: boolean
   setShowImportDSLModal: (showImportDSLModal: boolean) => void
+  showAddBlock: boolean
+  setShowAddBlock: (showAddBlock: boolean) => void
 }
 
 export const createWorkflowStore = () => {
@@ -262,6 +264,8 @@ export const createWorkflowStore = () => {
     setControlPromptEditorRerenderKey: controlPromptEditorRerenderKey => set(() => ({ controlPromptEditorRerenderKey })),
     showImportDSLModal: false,
     setShowImportDSLModal: showImportDSLModal => set(() => ({ showImportDSLModal })),
+    showAddBlock: false,
+    setShowAddBlock: showAddBlock => set(() => ({ showAddBlock })),
   }))
 }
 

web/app/components/workflow/utils.ts

@@ -427,6 +427,7 @@ export const isMac = () => {
 const specialKeysNameMap: Record<string, string | undefined> = {
   ctrl: '⌘',
   alt: '⌥',
+  shift: '⇧',
 }
 
 export const getKeyboardKeyNameBySystem = (key: string) => {