chore: fix placeholder ux

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

@@ -2,8 +2,8 @@
 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 React, { useCallback, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
 import Textarea from '../../../textarea'
 import TagLabel from './tag-label'
 import cn from '@/utils/classnames'
@@ -21,18 +21,24 @@ type Props = {
 
 const i18nPrefix = 'workflow.nodes.humanInput.insertInputField'
 
-const Placeholder = () => {
+type PlaceholderProps = {
+  onTypeClick: (isVariable: boolean) => void
+}
+const Placeholder = ({
+  onTypeClick,
+}: PlaceholderProps) => {
   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 className='system-sm-regular mt-1 h-[80px] rounded-lg bg-components-input-bg-normal px-3 pt-2 text-text-tertiary'>
+      <div className='flex flex-wrap items-center leading-5'>
+        <Trans
+          i18nKey={`${i18nPrefix}.prePopulateFieldPlaceholder`}
+          components={{
+            staticContent: <TagLabel type='edit' className='mx-1' onClick={() => onTypeClick(false)}>{t(`${i18nPrefix}.staticContent`)}</TagLabel>,
+            variable: <TagLabel type='variable' className='mx-1' onClick={() => onTypeClick(true)}>{t(`${i18nPrefix}.variable`)}</TagLabel>,
+          }}
+        />
       </div>
-      <div className="flex h-5 items-center">{t(`${i18nPrefix}.prePopulateFieldPlaceholderEnd`)}</div>
     </div>
   )
 }
@@ -48,10 +54,17 @@ const PrePopulate: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
 
+  const [onPlaceholderClicked, setOnPlaceholderClicked] = useState(false)
+  const handlePlaceholderTypeClick = useCallback((isVar: boolean) => {
+    setOnPlaceholderClicked(true)
+    onIsVariableChange?.(isVar)
+  }, [onIsVariableChange])
+
+  const isShowPlaceholder = !onPlaceholderClicked && (isVariable ? (!valueSelector || valueSelector.length === 0) : !value)
+  if (isShowPlaceholder)
+    return <Placeholder onTypeClick={handlePlaceholderTypeClick} />
+
   const main = (() => {
-    const isShowPlaceholder = isVariable ? (!valueSelector || valueSelector.length === 0) : !value
-    if (isShowPlaceholder)
-      return <Placeholder />
     if (isVariable) {
       return (
         <VarReferencePicker

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

@@ -3,21 +3,28 @@ import { RiEditLine } from '@remixicon/react'
 import type { FC } from 'react'
 import React from 'react'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
+import cn from '@/utils/classnames'
 
 type Props = {
   type: 'edit' | 'variable'
-  text: string
+  children: string
+  className?: string
+  onClick?: () => void
 }
 
 const TagLabel: FC<Props> = ({
   type,
-  text,
+  children,
+  className,
+  onClick,
 }) => {
   const Icon = type === 'edit' ? RiEditLine : Variable02
   return (
-    <div className='flex h-5 items-center space-x-1 rounded-md bg-components-button-secondary-bg px-1 text-text-accent'>
+    <div
+      className={cn('inline-flex h-5 cursor-pointer items-center space-x-1 rounded-md bg-components-button-secondary-bg px-1 text-text-accent', className)}
+      onClick={onClick}>
       <Icon className='size-3.5' />
-      <div className='system-xs-medium '>{text}</div>
+      <div className='system-xs-medium '>{children}</div>
     </div>
   )
 }

web/i18n/en-US/workflow.ts

@@ -966,12 +966,9 @@ const translation = {
         saveResponseAs: 'Save Response As',
         saveResponseAsPlaceholder: 'Name this variable for later reference',
         prePopulateField: 'Pre-populate Field',
-        add: 'Add',
+        prePopulateFieldPlaceholder: 'Add <staticContent/> or <variable/> users will see this content initially, or leave empty.',
         staticContent: 'Static Content',
-        or: 'or',
         variable: 'variable',
-        users: 'users',
-        prePopulateFieldPlaceholderEnd: 'will see initially, or leave empty.',
         insert: 'Insert',
         useVarInstead: 'Use Variable Instead',
         useConstantInstead: 'Use Constant Instead',

web/i18n/zh-Hans/workflow.ts

@@ -967,12 +967,9 @@ const translation = {
         saveResponseAs: '保存响应为',
         saveResponseAsPlaceholder: '为此变量命名以便将来引用',
         prePopulateField: '预填充字段',
-        add: '添加',
+        prePopulateFieldPlaceholder: '添加 <staticContent/> 或 <variable/> 用户将最初看到此内容，或留空。',
         staticContent: '静态内容',
-        or: '或',
         variable: '变量',
-        users: '用户',
-        prePopulateFieldPlaceholderEnd: '将最初看到，或留空。',
         insert: '插入',
         useVarInstead: '使用变量代替',
         useConstantInstead: '使用常量代替',