From baa77d3cda906cfa6125057f2dcaa3ca993a208a Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 22 Aug 2025 16:59:04 +0800
Subject: [PATCH] chore: can show popup

---
 web/app/components/base/prompt-editor/index.tsx   |  1 +
 .../plugins/hitl-input-block/component-ui.tsx     |  3 +++
 .../plugins/hitl-input-block/component.tsx        |  3 +++
 .../hitl-input-block-replacement-block.tsx        |  2 ++
 .../plugins/hitl-input-block/node.tsx             | 15 +++++++++++++++
 .../plugins/hitl-input-block/pre-populate.tsx     |  5 +++--
 web/app/components/base/prompt-editor/types.ts    |  1 +
 .../nodes/human-input/components/form-content.tsx |  1 +
 8 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 7b8a3bbd58..20d5c5019a 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -271,6 +271,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
             <>
               <HITLInputBlock />
               <HITLInputBlockReplacementBlock
+                nodeId={hitlInputBlock.nodeId}
                 nodeTitle={hitlInputBlock.nodeTitle}
                 formInputs={hitlInputBlock.formInputs}
                 onFormInputsChange={hitlInputBlock.onFormInputsChange}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
index 139b75c581..e90a70f3f0 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
@@ -14,6 +14,7 @@ import { useBoolean } from 'ahooks'
 import Modal from '../../../modal'
 
 type Props = {
+  nodeId: string
   nodeTitle: string
   varName: string
   isSelected: boolean
@@ -24,6 +25,7 @@ type Props = {
 }
 
 const ComponentUI: FC<Props> = ({
+  nodeId,
   nodeTitle,
   varName,
   // isSelected,
@@ -129,6 +131,7 @@ const ComponentUI: FC<Props> = ({
           className='max-w-[372px] !p-0'
         >
           <InputField
+            nodeId={nodeId}
             isEdit
             payload={formInput}
             onChange={handleChange}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx
index cf573e14bd..6bab5f4b43 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx
@@ -7,6 +7,7 @@ import produce from 'immer'
 
 type Props = {
   nodeKey: string
+  nodeId: string
   nodeTitle: string
   varName: string
   formInputs?: FormInputItem[]
@@ -17,6 +18,7 @@ type Props = {
 
 const HITLInputComponent: FC<Props> = ({
   nodeKey,
+  nodeId,
   nodeTitle,
   varName,
   formInputs = [],
@@ -45,6 +47,7 @@ const HITLInputComponent: FC<Props> = ({
       className='w-full pb-1 pt-3'
     >
       <ComponentUi
+        nodeId={nodeId}
         nodeTitle={nodeTitle}
         varName={varName}
         isSelected={isSelected}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx
index f492bf1619..767e050c7f 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx
@@ -20,6 +20,7 @@ const REGEX = new RegExp(HITL_INPUT_REG)
 
 const HITLInputReplacementBlock = ({
   // onInsert,
+  nodeId,
   nodeTitle,
   formInputs,
   onFormInputsChange,
@@ -37,6 +38,7 @@ const HITLInputReplacementBlock = ({
     const varName = textNode.getTextContent().split('.')[1].replace(/#}}$/, '')
     return $applyNodeReplacement($createHITLInputNode(
       varName,
+      nodeId,
       nodeTitle,
       formInputs || [],
       onFormInputsChange!,
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx
index 2b97bd40a0..336dcf064b 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx
@@ -5,6 +5,7 @@ import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/
 
 export type SerializedNode = SerializedLexicalNode & {
   variableName: string
+  nodeId: string
   nodeTitle: string
   formInputs: FormInputItem[]
   onFormInputsChange: (inputs: FormInputItem[]) => void
@@ -14,6 +15,7 @@ export type SerializedNode = SerializedLexicalNode & {
 
 export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
   __variableName: string
+  __nodeId: string
   __nodeTitle: string
   __formInputs?: FormInputItem[]
   __onFormInputsChange: (inputs: FormInputItem[]) => void
@@ -42,6 +44,11 @@ export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
     return self.__nodeTitle
   }
 
+  getNodeId(): string {
+    const self = this.getLatest()
+    return self.__nodeId
+  }
+
   getFormInputs(): FormInputItem[] {
     const self = this.getLatest()
     return self.__formInputs || []
@@ -65,6 +72,7 @@ export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
   static clone(node: HITLInputNode): HITLInputNode {
     return new HITLInputNode(
       node.__variableName,
+      node.__nodeId,
       node.__nodeTitle,
       node.__formInputs || [],
       node.__onFormInputsChange,
@@ -80,6 +88,7 @@ export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
 
   constructor(
     varName: string,
+    nodeId: string,
     nodeTitle: string,
     formInputs: FormInputItem[],
     onFormInputsChange: (inputs: FormInputItem[]) => void,
@@ -90,6 +99,7 @@ export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
     super(key)
 
     this.__variableName = varName
+    this.__nodeId = nodeId
     this.__nodeTitle = nodeTitle
     this.__formInputs = formInputs
     this.__onFormInputsChange = onFormInputsChange
@@ -111,6 +121,7 @@ export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
     return <HILTInputBlockComponent
       nodeKey={this.getKey()}
       varName={this.getVariableName()}
+      nodeId={this.getNodeId()}
       nodeTitle={this.getNodeTitle()}
       formInputs={this.getFormInputs()}
       onChange={this.getOnFormInputsChange()}
@@ -122,6 +133,7 @@ export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
   static importJSON(serializedNode: SerializedNode): HITLInputNode {
     const node = $createHITLInputNode(
       serializedNode.variableName,
+      serializedNode.nodeId,
       serializedNode.nodeTitle,
       serializedNode.formInputs,
       serializedNode.onFormInputsChange,
@@ -137,6 +149,7 @@ export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
       type: 'hitl-input-block',
       version: 1,
       variableName: this.getVariableName(),
+      nodeId: this.getNodeId(),
       nodeTitle: this.getNodeTitle(),
       formInputs: this.getFormInputs(),
       onFormInputsChange: this.getOnFormInputsChange(),
@@ -152,6 +165,7 @@ export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
 
 export function $createHITLInputNode(
   variableName: string,
+  nodeId: string,
   nodeTitle: string,
   formInputs: FormInputItem[],
   onFormInputsChange: (inputs: FormInputItem[]) => void,
@@ -160,6 +174,7 @@ export function $createHITLInputNode(
 ): HITLInputNode {
   return new HITLInputNode(
     variableName,
+    nodeId,
     nodeTitle,
     formInputs,
     onFormInputsChange,
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
index 7090909841..99807828f9 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
@@ -59,6 +59,7 @@ const PrePopulate: FC<Props> = ({
           value={valueSelector || []}
           onChange={onValueSelectorChange!}
           readonly={false}
+          zIndex={1000}
         />
       )
     }
@@ -72,9 +73,9 @@ const PrePopulate: FC<Props> = ({
   return (
     <div>
       {main}
-      <div className={cn('flex  space-x-1 text-text-tertiary')}>
+      <div className={cn('flex items-center space-x-1 text-text-tertiary')} onClick={() => onIsVariableChange?.(!isVariable)}>
         <Variable02 className='size-3.5' />
-        <div>{t(`${i18nPrefix}.useVarInstead`)}</div>
+        <div className='system-xs-medium'>{t(`${i18nPrefix}.useVarInstead`)}</div>
       </div>
     </div>
   )
diff --git a/web/app/components/base/prompt-editor/types.ts b/web/app/components/base/prompt-editor/types.ts
index 1323ee645a..beaffcaa73 100644
--- a/web/app/components/base/prompt-editor/types.ts
+++ b/web/app/components/base/prompt-editor/types.ts
@@ -80,6 +80,7 @@ export type WorkflowVariableBlockType = {
 
 export type HITLInputBlockType = {
   show?: boolean
+  nodeId: string
   nodeTitle: string
   formInputs?: FormInputItem[]
   onFormInputsChange?: (inputs: FormInputItem[]) => void
diff --git a/web/app/components/workflow/nodes/human-input/components/form-content.tsx b/web/app/components/workflow/nodes/human-input/components/form-content.tsx
index 2b701b9047..316d56e5c6 100644
--- a/web/app/components/workflow/nodes/human-input/components/form-content.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/form-content.tsx
@@ -53,6 +53,7 @@ const FormContent: FC<Props> = ({
         hitlInputBlock={{
           show: true,
           formInputs,
+          nodeId,
           nodeTitle,
           onFormInputsChange,
           onFormInputItemRename,