From 305b5da764f7047e356033a81f89e44e73b33c1d Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 25 Aug 2025 17:47:45 +0800
Subject: [PATCH] chore: pre popular placeholder ui

---
 .../plugins/hitl-input-block/pre-populate.tsx | 20 +++++++++++++------
 .../plugins/hitl-input-block/type-switch.tsx  |  2 +-
 .../variable/var-reference-picker.tsx         |  6 ++++--
 3 files changed, 19 insertions(+), 9 deletions(-)

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 0e67385be4..b54bc83308 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
@@ -81,25 +81,33 @@ const PrePopulate: FC<Props> = ({
 
   if (isVariable) {
     return (
-      <div>
+      <div className='relative h-[80px] rounded-lg border border-transparent bg-components-input-bg-normal px-3 pt-2'>
         <VarReferencePicker
           {...varPickerProps}
+          isJustShowValue
+        />
+        <TypeSwitch
+          className='absolute bottom-1 left-1.5'
+          isVariable={isVariable}
+          onIsVariableChange={handleTypeChange}
         />
-        <TypeSwitch isVariable={isVariable} onIsVariableChange={handleTypeChange} />
       </div>
     )
   }
   return (
-    <div className={cn('relative rounded-md border border-transparent bg-components-input-bg-normal pb-1', isFocus && 'border-components-input-border-active bg-components-input-bg-active shadow-xs')}>
+    <div className={cn('relative min-h-[80px] rounded-lg border border-transparent bg-components-input-bg-normal pb-1', isFocus && 'border-components-input-border-active bg-components-input-bg-active shadow-xs')}>
       <Textarea
         value={value || ''}
-        className='rounded-b-none border-none bg-transparent px-3 pb-8 hover:bg-transparent focus:bg-transparent focus:shadow-none'
+        className='h-[43px] min-h-[43px] rounded-none border-none bg-transparent px-3 hover:bg-transparent focus:bg-transparent focus:shadow-none'
         onChange={e => onValueChange?.(e.target.value)}
-        onFocus={() => setIsFocus(true)}
+        onFocus={() => {
+          setOnPlaceholderClicked(true)
+          setIsFocus(true)
+        }}
         onBlur={() => setIsFocus(false)}
       />
       <TypeSwitch
-        className='ml-1.5'
+        className='absolute bottom-1 left-1.5'
         isVariable={isVariable}
         onIsVariableChange={handleTypeChange}
       />
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
index 2b056b7db2..a1a172abe1 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
@@ -18,7 +18,7 @@ const TypeSwitch: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className={cn('inline-flex h-6 cursor-pointer items-center space-x-1 rounded-md pl-1.5 pr-2 text-text-tertiary hover:bg-components-button-ghost-bg-hover', className)} onClick={() => onIsVariableChange?.(!isVariable)}>
+    <div className={cn('inline-flex h-6 cursor-pointer select-none items-center space-x-1 rounded-md pl-1.5 pr-2 text-text-tertiary hover:bg-components-button-ghost-bg-hover', className)} onClick={() => onIsVariableChange?.(!isVariable)}>
       <Variable02 className='size-3.5' />
       <div className='system-xs-medium'>{t(`workflow.nodes.humanInput.insertInputField.${isVariable ? 'useConstantInstead' : 'useVarInstead'}`)}</div>
     </div>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index 288cc218bb..ca284b60ed 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -62,6 +62,7 @@ type Props = {
   availableNodes?: Node[]
   availableVars?: NodeOutPutVar[]
   trigger?: React.ReactNode
+  isJustShowValue?: boolean
   isAddBtnTrigger?: boolean
   schema?: Partial<CredentialFormSchema>
   valueTypePlaceHolder?: string
@@ -94,6 +95,7 @@ const VarReferencePicker: FC<Props> = ({
   availableNodes: passedInAvailableNodes,
   availableVars: passedInAvailableVars,
   trigger,
+  isJustShowValue,
   isAddBtnTrigger,
   schema,
   valueTypePlaceHolder,
@@ -408,7 +410,7 @@ const VarReferencePicker: FC<Props> = ({
                     <AddButton onClick={noop}></AddButton>
                   </div>
                 )
-                : (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'group/wrap relative flex h-8 w-full items-center', !isSupportConstantValue && 'rounded-lg bg-components-input-bg-normal p-1', isInTable && 'border-none bg-transparent', readonly && 'bg-components-input-bg-disabled')}>
+                : (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'group/wrap relative flex h-8 w-full items-center', !isSupportConstantValue && 'rounded-lg bg-components-input-bg-normal p-1', isInTable && 'border-none bg-transparent', readonly && 'bg-components-input-bg-disabled', isJustShowValue && 'h-6 bg-transparent p-0')}>
                   {isSupportConstantValue
                     ? <div onClick={(e) => {
                       e.stopPropagation()
@@ -516,7 +518,7 @@ const VarReferencePicker: FC<Props> = ({
 
                       </VarPickerWrap>
                     )}
-                  {(hasValue && !readonly && !isInTable) && (<div
+                  {(hasValue && !readonly && !isInTable && !isJustShowValue) && (<div
                     className='group invisible absolute right-1 top-[50%] h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 hover:bg-state-base-hover group-hover/wrap:visible'
                     onClick={handleClearVar}
                   >