From 0618b2532f15224be9dca7b9e20c01e280323557 Mon Sep 17 00:00:00 2001
From: zhsama <torvalds@linux.do>
Date: Thu, 5 Feb 2026 01:36:02 +0800
Subject: [PATCH] feat: Add Enter key handler support to assemble variables
 generate modal

---
 .../components/base/prompt-editor/index.tsx   | 29 ++++++++++
 .../components/chat-view.tsx                  | 25 ++++-----
 .../components/left-panel.tsx                 | 54 ++++++++++++++-----
 .../hooks/use-context-generate.ts             |  4 ++
 .../context-generate-modal/index.tsx          |  4 ++
 5 files changed, 92 insertions(+), 24 deletions(-)

diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 1ad380bd8d..2dcc8beed0 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -26,6 +26,8 @@ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
 import {
   $getRoot,
+  COMMAND_PRIORITY_LOW,
+  KEY_ENTER_COMMAND,
   TextNode,
 } from 'lexical'
 import * as React from 'react'
@@ -124,6 +126,30 @@ const ValueSyncPlugin: FC<{ value?: string }> = ({ value }) => {
   return null
 }
 
+const EnterCommandPlugin: FC<{ onEnter?: (event: KeyboardEvent) => void }> = ({ onEnter }) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!onEnter)
+      return
+    return editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (event: KeyboardEvent) => {
+        if (!event || event.defaultPrevented)
+          return false
+        if (event.isComposing || event.shiftKey)
+          return false
+        event.preventDefault()
+        onEnter(event)
+        return true
+      },
+      COMMAND_PRIORITY_LOW,
+    )
+  }, [editor, onEnter])
+
+  return null
+}
+
 export type PromptEditorProps = {
   instanceId?: string
   compact?: boolean
@@ -152,6 +178,7 @@ export type PromptEditorProps = {
   isSupportFileVar?: boolean
   isSupportSandbox?: boolean
   disableToolBlocks?: boolean
+  onEnter?: (event: KeyboardEvent) => void
 }
 
 const PromptEditor: FC<PromptEditorProps> = ({
@@ -182,6 +209,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
   isSupportFileVar,
   isSupportSandbox,
   disableToolBlocks,
+  onEnter,
 }) => {
   const { eventEmitter } = useEventEmitterContextContext()
   const initialConfig = {
@@ -436,6 +464,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           }
           <ValueSyncPlugin value={value} />
           <OnChangePlugin onChange={handleEditorChange} />
+          <EnterCommandPlugin onEnter={onEnter} />
           <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
           <UpdateBlock instanceId={instanceId} />
           <HistoryPlugin />
diff --git a/web/app/components/workflow/nodes/tool/components/context-generate-modal/components/chat-view.tsx b/web/app/components/workflow/nodes/tool/components/context-generate-modal/components/chat-view.tsx
index 8e4a957a83..efea695bd9 100644
--- a/web/app/components/workflow/nodes/tool/components/context-generate-modal/components/chat-view.tsx
+++ b/web/app/components/workflow/nodes/tool/components/context-generate-modal/components/chat-view.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import type { ContextGenerateChatMessage } from '../hooks/use-context-generate'
 import type { VersionOption } from '../types'
+import type { WorkflowVariableBlockType } from '@/app/components/base/prompt-editor/types'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { TriggerProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
 import type { Model } from '@/types/app'
@@ -10,6 +11,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
 import { CodeAssistant } from '@/app/components/base/icons/src/vender/line/general'
+import PromptEditor from '@/app/components/base/prompt-editor'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import { cn } from '@/utils/classnames'
 
@@ -27,6 +29,7 @@ type ChatViewProps = {
   onModelChange: (newValue: { modelId: string, provider: string, mode?: string, features?: string[] }) => void
   onCompletionParamsChange: (newParams: FormValue) => void
   renderModelTrigger: (params: TriggerProps) => ReactNode
+  workflowVariableBlock: WorkflowVariableBlockType
 }
 
 const ChatView = ({
@@ -43,6 +46,7 @@ const ChatView = ({
   onModelChange,
   onCompletionParamsChange,
   renderModelTrigger,
+  workflowVariableBlock,
 }: ChatViewProps) => {
   const { t } = useTranslation()
   const chatListRef = useRef<HTMLDivElement>(null)
@@ -130,19 +134,16 @@ const ChatView = ({
       <div className="bg-gradient-to-b from-[rgba(255,255,255,0.01)] to-background-body px-1 pb-1 pt-3">
         <div className="flex min-h-[112px] flex-col justify-between overflow-hidden rounded-xl border-[0.5px] border-components-input-border-active bg-components-panel-bg shadow-shadow-shadow-5 backdrop-blur-[5px]">
           <div className="flex min-h-[64px] px-3 pb-1 pt-2.5">
-            <textarea
-              value={inputValue}
-              onChange={e => onInputChange(e.target.value)}
-              onKeyDown={(event) => {
-                if (event.key === 'Enter' && !event.shiftKey) {
-                  event.preventDefault()
-                  onGenerate()
-                }
-              }}
+            <PromptEditor
+              wrapperClassName="w-full"
+              className="text-sm leading-5 text-text-primary"
               placeholder={t('nodes.tool.contextGenerate.inputPlaceholder', { ns: 'workflow' }) as string}
-              className="w-full resize-none bg-transparent text-sm leading-5 text-text-primary placeholder:text-text-quaternary focus:outline-none"
-              disabled={isGenerating}
-              rows={2}
+              placeholderClassName="text-text-quaternary"
+              editable={!isGenerating}
+              value={inputValue}
+              workflowVariableBlock={workflowVariableBlock}
+              onChange={onInputChange}
+              onEnter={() => onGenerate()}
             />
           </div>
           <div className="flex items-end gap-2 p-2">
diff --git a/web/app/components/workflow/nodes/tool/components/context-generate-modal/components/left-panel.tsx b/web/app/components/workflow/nodes/tool/components/context-generate-modal/components/left-panel.tsx
index 95457633dd..952018eb1e 100644
--- a/web/app/components/workflow/nodes/tool/components/context-generate-modal/components/left-panel.tsx
+++ b/web/app/components/workflow/nodes/tool/components/context-generate-modal/components/left-panel.tsx
@@ -2,15 +2,18 @@ import type { ContextGenerateChatMessage } from '../hooks/use-context-generate'
 import type { VersionOption } from '../types'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { TriggerProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
+import type { Node, NodeOutPutVar } from '@/app/components/workflow/types'
 import type { Model } from '@/types/app'
 import { RiArrowDownSLine, RiRefreshLine, RiSendPlaneLine, RiSparklingLine } from '@remixicon/react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
+import PromptEditor from '@/app/components/base/prompt-editor'
 import { SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
 import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
+import { BlockEnum } from '@/app/components/workflow/types'
 import { renderI18nObject } from '@/i18n-config'
 import { cn } from '@/utils/classnames'
 import ChatView from './chat-view'
@@ -32,6 +35,8 @@ type LeftPanelProps = {
   currentVersionIndex: number
   onSelectVersion: (index: number) => void
   defaultAssistantMessage: string
+  availableVars: NodeOutPutVar[]
+  availableNodes: Node[]
 }
 
 const LeftPanel = ({
@@ -51,12 +56,39 @@ const LeftPanel = ({
   currentVersionIndex,
   onSelectVersion,
   defaultAssistantMessage,
+  availableVars,
+  availableNodes,
 }: LeftPanelProps) => {
   const { t, i18n } = useTranslation()
   const language = useMemo(() => (i18n.language || 'en-US').replace('-', '_'), [i18n.language])
   const shouldShowSuggestedSkeleton = isInitView && !hasFetchedSuggestions
   const suggestedSkeletonItems = useMemo(() => ([0, 1, 2]), [])
 
+  const workflowNodesMap = useMemo(() => {
+    return availableNodes.reduce<Record<string, Pick<Node['data'], 'title' | 'type' | 'height' | 'width' | 'position'>>>((acc, node) => {
+      acc[node.id] = {
+        title: node.data.title,
+        type: node.data.type,
+        height: node.data.height,
+        width: node.data.width,
+        position: node.data.position,
+      }
+      if (node.data.type === BlockEnum.Start) {
+        acc.sys = {
+          title: t('blocks.start', { ns: 'workflow' }),
+          type: BlockEnum.Start,
+        }
+      }
+      return acc
+    }, {})
+  }, [availableNodes, t])
+
+  const workflowVariableBlock = useMemo(() => ({
+    show: true,
+    variables: availableVars,
+    workflowNodesMap,
+  }), [availableVars, workflowNodesMap])
+
   const renderModelTrigger = useCallback((params: TriggerProps) => {
     const label = params.currentModel?.label
       ? renderI18nObject(params.currentModel.label, language)
@@ -125,19 +157,16 @@ const LeftPanel = ({
               <div className="bg-gradient-to-b from-[rgba(255,255,255,0.01)] to-background-body px-2 pb-2 pt-3">
                 <div className="flex h-[120px] flex-col justify-between overflow-hidden rounded-xl border-[0.5px] border-components-input-border-active bg-components-panel-bg shadow-shadow-shadow-5 backdrop-blur-[5px]">
                   <div className="flex min-h-[64px] px-3 pb-1 pt-2.5">
-                    <textarea
-                      value={inputValue}
-                      onChange={e => onInputChange(e.target.value)}
-                      onKeyDown={(event) => {
-                        if (event.key === 'Enter' && !event.shiftKey) {
-                          event.preventDefault()
-                          onGenerate()
-                        }
-                      }}
+                    <PromptEditor
+                      wrapperClassName="w-full"
+                      className="text-sm leading-5 text-text-primary"
                       placeholder={t('nodes.tool.contextGenerate.initPlaceholder', { ns: 'workflow' })}
-                      className="w-full resize-none bg-transparent text-sm leading-5 text-text-primary placeholder:text-text-quaternary focus:outline-none"
-                      disabled={isGenerating}
-                      rows={2}
+                      placeholderClassName="text-text-quaternary"
+                      editable={!isGenerating}
+                      value={inputValue}
+                      workflowVariableBlock={workflowVariableBlock}
+                      onChange={onInputChange}
+                      onEnter={() => onGenerate()}
                     />
                   </div>
                   <div className="flex items-end gap-2 p-2">
@@ -208,6 +237,7 @@ const LeftPanel = ({
               onModelChange={onModelChange}
               onCompletionParamsChange={onCompletionParamsChange}
               renderModelTrigger={renderModelTrigger}
+              workflowVariableBlock={workflowVariableBlock}
             />
           )}
     </div>
diff --git a/web/app/components/workflow/nodes/tool/components/context-generate-modal/hooks/use-context-generate.ts b/web/app/components/workflow/nodes/tool/components/context-generate-modal/hooks/use-context-generate.ts
index f15a20681d..ce0960e95c 100644
--- a/web/app/components/workflow/nodes/tool/components/context-generate-modal/hooks/use-context-generate.ts
+++ b/web/app/components/workflow/nodes/tool/components/context-generate-modal/hooks/use-context-generate.ts
@@ -160,6 +160,8 @@ type UseContextGenerateResult = {
   versionOptions: VersionOption[]
   currentVersionLabel: string
   isInitView: boolean
+  availableVars: NodeOutPutVar[]
+  availableNodes: Node[]
 }
 
 const useContextGenerate = ({
@@ -539,6 +541,8 @@ const useContextGenerate = ({
     versionOptions,
     currentVersionLabel,
     isInitView,
+    availableVars: resolvedAvailableVars,
+    availableNodes: resolvedAvailableNodes,
   }
 }
 
diff --git a/web/app/components/workflow/nodes/tool/components/context-generate-modal/index.tsx b/web/app/components/workflow/nodes/tool/components/context-generate-modal/index.tsx
index 5bba6184a3..1e9669f632 100644
--- a/web/app/components/workflow/nodes/tool/components/context-generate-modal/index.tsx
+++ b/web/app/components/workflow/nodes/tool/components/context-generate-modal/index.tsx
@@ -116,6 +116,8 @@ const ContextGenerateModal = forwardRef<ContextGenerateModalHandle, Props>(({
     versionOptions,
     currentVersionLabel,
     isInitView,
+    availableVars: resolvedAvailableVars,
+    availableNodes: resolvedAvailableNodes,
   } = useContextGenerate({
     storageKey,
     toolNodeId,
@@ -241,6 +243,8 @@ const ContextGenerateModal = forwardRef<ContextGenerateModalHandle, Props>(({
           currentVersionIndex={currentVersionIndex}
           onSelectVersion={setCurrentVersionIndex}
           defaultAssistantMessage={defaultAssistantMessage}
+          availableVars={resolvedAvailableVars}
+          availableNodes={resolvedAvailableNodes}
         />
         <RightPanel
           isInitView={isInitView}