FEAT: NEW WORKFLOW ENGINE (#3160)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>

web/app/components/base/prompt-editor/plugins/placeholder.tsx

@@ -1,13 +1,27 @@
+import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
 
-const Placeholder = () => {
+const Placeholder = ({
+  compact,
+  value,
+  className,
+}: {
+  compact?: boolean
+  value?: string
+  className?: string
+}) => {
   const { t } = useTranslation()
 
   return (
-    <div className='absolute top-0 left-0 h-full w-full text-sm text-gray-300 select-none pointer-events-none leading-6'>
-      {t('common.promptEditor.placeholder')}
+    <div className={cn(
+      className,
+      'absolute top-0 left-0 h-full w-full text-sm text-gray-300 select-none pointer-events-none',
+      compact ? 'leading-5 text-[13px]' : 'leading-6 text-sm',
+    )}>
+      {value || t('common.promptEditor.placeholder')}
     </div>
   )
 }
 
-export default Placeholder
+export default memo(Placeholder)