chore: handle textare to ui

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

@@ -30,7 +30,7 @@ const InputField: React.FC<Props> = ({
   const handleSave = useCallback(() => {
     onChange(tempPayload)
   }, [tempPayload])
-  const placeholderConfig = payload.placeholder
+  const placeholderConfig = tempPayload.placeholder
   const handlePlaceholderChange = useCallback((key: keyof FormInputItemPlaceholder) => {
     return (value: any) => {
       const nextValue = produce(tempPayload, (draft) => {
@@ -40,7 +40,7 @@ const InputField: React.FC<Props> = ({
       })
       setTempPayload(nextValue)
     }
-  }, [])
+  }, [tempPayload])
   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>
@@ -58,16 +58,9 @@ const InputField: React.FC<Props> = ({
         />
       </div>
       <div className='mt-4'>
-        <div className='system-xs-medium text-text-secondary'>
+        <div className='system-xs-medium mb-1.5 text-text-secondary'>
           {t(`${i18nPrefix}.prePopulateField`)}
         </div>
-        {/* <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) => {

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

@@ -6,8 +6,8 @@ import React, { useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import Textarea from '../../../textarea'
 import TagLabel from './tag-label'
+import TypeSwitch from './type-switch'
 import cn from '@/utils/classnames'
-import { Variable02 } from '../../../icons/src/vender/solid/development'
 
 type Props = {
   isVariable?: boolean
@@ -52,21 +52,21 @@ const PrePopulate: FC<Props> = ({
   value,
   onValueChange,
 }) => {
-  const { t } = useTranslation()
-
   const [onPlaceholderClicked, setOnPlaceholderClicked] = useState(false)
   const handlePlaceholderTypeClick = useCallback((isVar: boolean) => {
     setOnPlaceholderClicked(true)
     onIsVariableChange?.(isVar)
   }, [onIsVariableChange])
 
+  const [isFocus, setIsFocus] = useState(false)
+
   const isShowPlaceholder = !onPlaceholderClicked && (isVariable ? (!valueSelector || valueSelector.length === 0) : !value)
   if (isShowPlaceholder)
     return <Placeholder onTypeClick={handlePlaceholderTypeClick} />
 
-  const main = (() => {
-    if (isVariable) {
-      return (
+  if (isVariable) {
+    return (
+      <div>
         <VarReferencePicker
           nodeId={nodeId}
           value={valueSelector || []}
@@ -74,22 +74,24 @@ const PrePopulate: FC<Props> = ({
           readonly={false}
           zIndex={1000}
         />
-      )
-    }
-    return (
+        <TypeSwitch isVariable={isVariable} onIsVariableChange={onIsVariableChange} />
+      </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')}>
       <Textarea
         value={value || ''}
+        className='rounded-b-none border-none bg-transparent px-3 pb-8 hover:bg-transparent focus:bg-transparent focus:shadow-none'
         onChange={e => onValueChange?.(e.target.value)}
+        onFocus={() => setIsFocus(true)}
+        onBlur={() => setIsFocus(false)}
+      />
+      <TypeSwitch
+        className='ml-1.5'
+        isVariable={isVariable}
+        onIsVariableChange={onIsVariableChange}
       />
-    )
-  })()
-  return (
-    <div>
-      {main}
-      <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')} onClick={() => onIsVariableChange?.(!isVariable)}>
-        <Variable02 className='size-3.5' />
-        <div className='system-xs-medium'>{t(`${i18nPrefix}.useVarInstead`)}</div>
-      </div>
     </div>
   )
 }

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

@@ -0,0 +1,27 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { Variable02 } from '../../../icons/src/vender/solid/development'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  className?: string
+  isVariable?: boolean
+  onIsVariableChange?: (isVariable: boolean) => void
+}
+
+const TypeSwitch: FC<Props> = ({
+  className,
+  isVariable,
+  onIsVariableChange,
+}) => {
+  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)}>
+      <Variable02 className='size-3.5' />
+      <div className='system-xs-medium'>{t(`workflow.nodes.humanInput.insertInputField.${isVariable ? 'useConstantInstead' : 'useVarInstead'}`)}</div>
+    </div>
+  )
+}
+export default React.memo(TypeSwitch)