chore: pre poplulte field

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

@@ -35,7 +35,7 @@ const ComponentUI: FC<Props> = ({
       selector: [],
       value: '',
     },
-  },
+  } as FormInputItem,
   onChange,
   onRename,
   onRemove,

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

@@ -5,17 +5,21 @@ import Input from '@/app/components/base/input'
 import Button from '../../../button'
 import { useTranslation } from 'react-i18next'
 import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
-import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
+import type { FormInputItem, FormInputItemPlaceholder } from '@/app/components/workflow/nodes/human-input/types'
+import PrePopulate from './pre-populate'
+import produce from 'immer'
 
 const i18nPrefix = 'workflow.nodes.humanInput.insertInputField'
 
 type Props = {
+  nodeId: string
   isEdit: boolean
   payload: FormInputItem
   onChange: (newPayload: FormInputItem) => void
   onCancel: () => void
 }
 const InputField: React.FC<Props> = ({
+  nodeId,
   isEdit,
   payload,
   onChange,
@@ -26,6 +30,17 @@ const InputField: React.FC<Props> = ({
   const handleSave = useCallback(() => {
     onChange(tempPayload)
   }, [tempPayload])
+  const placeholderConfig = payload.placeholder
+  const handlePlaceholderChange = useCallback((key: keyof FormInputItemPlaceholder) => {
+    return (value: any) => {
+      const nextValue = produce(tempPayload, (draft) => {
+        if (!draft.placeholder)
+          draft.placeholder = { type: 'const', selector: [], value: '' }
+        draft.placeholder[key] = value
+      })
+      setTempPayload(nextValue)
+    }
+  }, [])
   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`)}</div>
@@ -46,32 +61,23 @@ const InputField: React.FC<Props> = ({
         <div className='system-xs-medium text-text-secondary'>
           {t(`${i18nPrefix}.prePopulateField`)}
         </div>
-        {/* <PromptEditor
-          className='mt-1.5 h-[72px] rounded-lg bg-components-input-bg-normal px-3 py-1'
-          placeholder={
-          <div className='system-sm-regular mt-1 px-3 text-text-tertiary'>
-            <div className="flex h-5 items-center space-x-1">
-              <span>{t(`${i18nPrefix}.add`)}</span>
-              <TagLabel type='edit' text={t(`${i18nPrefix}.staticContent`)} />
-              <span>{t(`${i18nPrefix}.or`)}</span>
-              <TagLabel type='variable' text={t(`${i18nPrefix}.variable`)} />
-              <span>{t(`${i18nPrefix}.users`)}</span>
-            </div>
-            <div className="flex h-5 items-center">{t(`${i18nPrefix}.prePopulateFieldPlaceholderEnd`)}</div>
-          </div>
-          }
-          onChange={
-            (newValue) => {
-              setTempPayload(prev => ({ ...prev, prePopulateField: newValue }))
-            }
-          }
-        /> */}
-        <Input
+        {/* <Input
           className='mt-1.5'
           value={tempPayload.placeholder?.value}
           onChange={(e) => {
             setTempPayload(prev => ({ ...prev, placeholder: { ...(prev.placeholder || {}), value: e.target.value } } as any))
           }}
+        /> */}
+        <PrePopulate
+          isVariable={placeholderConfig?.type === 'variable'}
+          onIsVariableChange={(isVariable) => {
+            handlePlaceholderChange('type')(isVariable ? 'variable' : 'const')
+          }}
+          nodeId={nodeId}
+          valueSelector={placeholderConfig?.selector}
+          onValueSelectorChange={handlePlaceholderChange('selector')}
+          value={placeholderConfig?.value}
+          onValueChange={handlePlaceholderChange('value')}
         />
       </div>
       <div className='mt-4 flex justify-end space-x-2'>

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

@@ -0,0 +1,82 @@
+'use client'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
+import type { ValueSelector } from '@/app/components/workflow/types'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Textarea from '../../../textarea'
+import TagLabel from './tag-label'
+import cn from '@/utils/classnames'
+import { Variable02 } from '../../../icons/src/vender/solid/development'
+
+type Props = {
+  isVariable?: boolean
+  onIsVariableChange?: (isVariable: boolean) => void
+  nodeId: string
+  valueSelector?: ValueSelector
+  onValueSelectorChange?: (valueSelector: ValueSelector | string) => void
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+const i18nPrefix = 'workflow.nodes.humanInput.insertInputField'
+
+const Placeholder = () => {
+  const { t } = useTranslation()
+  return (
+    <div className='system-sm-regular mt-1 px-3 text-text-tertiary'>
+      <div className="flex h-5 items-center space-x-1">
+        <span>{t(`${i18nPrefix}.add`)}</span>
+        <TagLabel type='edit' text={t(`${i18nPrefix}.staticContent`)} />
+        <span>{t(`${i18nPrefix}.or`)}</span>
+        <TagLabel type='variable' text={t(`${i18nPrefix}.variable`)} />
+        <span>{t(`${i18nPrefix}.users`)}</span>
+      </div>
+      <div className="flex h-5 items-center">{t(`${i18nPrefix}.prePopulateFieldPlaceholderEnd`)}</div>
+    </div>
+  )
+}
+
+const PrePopulate: FC<Props> = ({
+  isVariable = false,
+  onIsVariableChange,
+  nodeId,
+  valueSelector,
+  onValueSelectorChange,
+  value,
+  onValueChange,
+}) => {
+  const { t } = useTranslation()
+
+  const main = (() => {
+    const isShowPlaceholder = isVariable ? (!valueSelector || valueSelector.length === 0) : !value
+    if (isShowPlaceholder)
+      return <Placeholder />
+    if (isVariable) {
+      return (
+        <VarReferencePicker
+          nodeId={nodeId}
+          value={valueSelector || []}
+          onChange={onValueSelectorChange!}
+          readonly={false}
+        />
+      )
+    }
+    return (
+      <Textarea
+        value={value || ''}
+        onChange={e => onValueChange?.(e.target.value)}
+      />
+    )
+  })()
+  return (
+    <div>
+      {main}
+      <div className={cn('flex  space-x-1 text-text-tertiary')}>
+        <Variable02 className='size-3.5' />
+        <div>{t(`${i18nPrefix}.useVarInstead`)}</div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(PrePopulate)

web/app/components/workflow/nodes/human-input/types.ts

@@ -50,8 +50,8 @@ export type FormInputItem = {
   output_variable_name: string
   // only text-input and paragraph support placeholder
   placeholder?: FormInputItemPlaceholder
-  options: any[]
-  max_length: number
+  options?: any[]
+  max_length?: number
   allowed_file_extensions?: string[]
   allowed_file_types?: string[]
   allowed_file_upload_methods?: string[]

web/i18n/en-US/workflow.ts

@@ -973,6 +973,8 @@ const translation = {
         users: 'users',
         prePopulateFieldPlaceholderEnd: 'will see initially, or leave empty.',
         insert: 'Insert',
+        useVarInstead: 'Use Variable Instead',
+        useConstantInstead: 'Use Constant Instead',
       },
       editor: {
         notes: 'notes',

web/i18n/zh-Hans/workflow.ts

@@ -974,6 +974,8 @@ const translation = {
         users: '用户',
         prePopulateFieldPlaceholderEnd: '将最初看到，或留空。',
         insert: '插入',
+        useVarInstead: '使用变量代替',
+        useConstantInstead: '使用常量代替',
       },
       editor: {
         notes: ' 笔记',