enhancement: add keyboard events handle

web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx

@@ -1,7 +1,7 @@
 import type { FormInputItem, FormInputItemPlaceholder } from '@/app/components/workflow/nodes/human-input/types'
 import { produce } from 'immer'
 import * as React from 'react'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { InputVarType } from '@/app/components/workflow/types'
@@ -60,6 +60,20 @@ const InputField: React.FC<Props> = ({
       setTempPayload(nextValue)
     }
   }, [tempPayload])
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+        e.preventDefault()
+        handleSave()
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [handleSave])
+
   return (
     <div className="w-[372px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg backdrop-blur-[5px]">
       <div className="system-md-semibold text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'workflow' })}</div>

web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import * as React from 'react'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import { VarType } from '@/app/components/workflow/types'
@@ -24,7 +24,15 @@ type Props = {
 const i18nPrefix = 'nodes.humanInput.insertInputField'
 
 type PlaceholderProps = {
-  varPickerProps: any
+  varPickerProps: {
+    nodeId: string
+    value: ValueSelector
+    onChange: (valueSelector: ValueSelector | string) => void
+    readonly: boolean
+    zIndex: number
+    filterVar: (varPayload: Var) => boolean
+    isJustShowValue?: boolean
+  }
   onTypeClick: (isVariable: boolean) => void
 }
 const Placeholder = ({
@@ -84,6 +92,20 @@ const PrePopulate: FC<Props> = ({
   }
 
   const isShowPlaceholder = !onPlaceholderClicked && (isVariable ? (!valueSelector || valueSelector.length === 0) : !value)
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Tab' && !onPlaceholderClicked) {
+        e.preventDefault()
+        setOnPlaceholderClicked(true)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [onPlaceholderClicked, setOnPlaceholderClicked])
+
   if (isShowPlaceholder)
     return <Placeholder varPickerProps={varPickerProps} onTypeClick={handleTypeChange} />
 
@@ -113,6 +135,7 @@ const PrePopulate: FC<Props> = ({
           setIsFocus(true)
         }}
         onBlur={() => setIsFocus(false)}
+        autoFocus
       />
       <TypeSwitch
         className="absolute bottom-1 left-1.5"

web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx

@@ -290,7 +290,7 @@ export default function ShortcutsPopupPlugin({
       }}
       className={cn(
         useContainer ? '' : 'z-[999999]',
-        'absolute rounded-md bg-slate-50 shadow-lg',
+        'absolute rounded-xl bg-components-panel-bg-blur shadow-lg',
         className,
       )}
       style={{

web/eslint-suppressions.json

@@ -1402,11 +1402,6 @@
       "count": 1
     }
   },
-  "app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "app/components/base/prompt-editor/plugins/on-blur-or-focus-block.tsx": {
     "ts/no-explicit-any": {
       "count": 1