add block shortcut

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,
+    handlePanelContextMenu,
-    handlePaneContextmenuCancel,
+    handlePanelContextmenuCancel,
     handleNodeContextmenuCancel,
   }
 }

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

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

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()
+      handlePanelContextmenuCancel()
-  }, [nodeMenu, handlePaneContextmenuCancel])
+  }, [nodeMenu, handlePanelContextmenuCancel])
 
   useClickAway(() => {
     handleNodeContextmenuCancel()

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

@@ -1,7 +1,6 @@
 import {
   memo,
   useCallback,
-  useState,
 } from 'react'
 import { RiAddCircleFill } from '@remixicon/react'
 import { useStoreApi } from 'reactflow'
@@ -16,7 +15,7 @@ import {
   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'
@@ -39,15 +38,17 @@ const AddBlock = ({
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
   const { nodesReadOnly } = useNodesReadOnly()
-  const { handlePaneContextmenuCancel } = usePanelInteractions()
+  const { handlePanelContextmenuCancel } = usePanelInteractions()
-  const [open, setOpen] = useState(false)
   const { availableNextBlocks } = useAvailableBlocks(BlockEnum.Start, false)
 
+  const showAddBlock = useStore(state => state.showAddBlock)
+  const setShowAddBlock = useStore(state => state.setShowAddBlock)
+
   const handleOpenChange = useCallback((open: boolean) => {
-    setOpen(open)
+    setShowAddBlock(open)
     if (!open)
-      handlePaneContextmenuCancel()
+      handlePanelContextmenuCancel()
-  }, [handlePaneContextmenuCancel])
+  }, [setShowAddBlock, handlePanelContextmenuCancel])
 
   const handleSelect = useCallback<OnSelectBlock>((type, toolDefaultValue) => {
     const {
@@ -90,7 +91,7 @@ const AddBlock = ({
 
   return (
     <BlockSelector
-      open={open}
+      open={showAddBlock}
       onOpenChange={handleOpenChange}
       disabled={nodesReadOnly}
       onSelect={handleSelect}

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 = () => {
@@ -74,7 +74,7 @@ const PanelContextmenu = () => {
           onClick={(e) => {
             e.stopPropagation()
             handleAddNote()
-            handlePaneContextmenuCancel()
+            handlePanelContextmenuCancel()
           }}
         >
           {t('workflow.nodes.note.addNote')}
@@ -83,7 +83,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')}
@@ -100,7 +100,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 })),
   }))
 }