From ad0e79372fac6d58723f0956bac65991ca899be1 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 5 Sep 2025 14:19:13 +0800
Subject: [PATCH] feat: can show notes

---
 .../components/form-content-preview.tsx         | 17 ++++++++++++++---
 .../components/variable-in-markdown.tsx         | 17 ++++++++++++++---
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
index 9c65d72aef..36efbd2270 100644
--- a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
@@ -10,7 +10,7 @@ import Badge from '@/app/components/base/badge'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { RiCloseLine } from '@remixicon/react'
-import { Variable, rehypeNotes, rehypeVariable } from './variable-in-markdown'
+import { Note, Variable, rehypeNotes, rehypeVariable } from './variable-in-markdown'
 
 const i18nPrefix = 'workflow.nodes.humanInput'
 
@@ -43,9 +43,20 @@ const FormContentPreview: FC<Props> = ({
           content={content}
           rehypePlugins={[rehypeVariable, rehypeNotes]}
           customComponents={{
-            variable: ({ node, ...props }: any) => (
-              <Variable path={node.properties?.path as string} />
+            variable: ({ node }: any) => (
+              <Variable path={node.properties?.['data-path'] as string} />
             ),
+            section: ({ node }: any) => (() => {
+              const name = node.properties?.['data-name'] as string
+              const input = formInputs.find(i => i.output_variable_name === name)
+              if(!input) {
+                return (
+                  <div>Can't find note: {name}</div>
+                )
+              }
+              const placeholder = input.placeholder
+              return <Note placeholder={placeholder!} />
+            })(),
           }}
         />
         <div className='mt-3 flex flex-wrap gap-1 py-1'>
diff --git a/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx b/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
index 2e89ebd712..d6c6732f6d 100644
--- a/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
@@ -1,4 +1,5 @@
 import type React from 'react'
+import type { FormInputItemPlaceholder } from '../types'
 
 const variableRegex = /\{\{#(.+?)#\}\}/g
 const noteRegex = /\{\{#\$(.+?)#\}\}/g
@@ -21,7 +22,7 @@ export function rehypeVariable() {
           parts.push({
             type: 'element',
             tagName: 'variable',
-            properties: { path: m[0].trim() },
+            properties: { 'data-path': m[0].trim() },
             children: [],
           })
 
@@ -79,10 +80,11 @@ export function rehypeNotes() {
               },
             ],
           })
+          const name = m[0].split('.').slice(-1)[0].replace('#}}', '')
           parts.push({
             type: 'element',
-            tagName: 'note', // choose a right tag
-            properties: { path: m[0].trim() },
+            tagName: 'section',
+            properties: { 'data-name': name },
             children: [],
           })
 
@@ -121,3 +123,12 @@ export const Variable: React.FC<{ path: string }> = ({ path }) => {
       .replace('{{#', '{{')
       .replace('#}}', '}}')}</span>
 }
+
+export const Note: React.FC<{ placeholder: FormInputItemPlaceholder }> = ({ placeholder }) => {
+  const isVariable = placeholder.type === 'variable'
+  return (
+    <div className='mt-3 rounded-[10px] bg-components-input-bg-normal px-2.5 py-2'>
+      {isVariable ? <Variable path={`{{${placeholder.selector.join('.')}}}`} /> : <span>{placeholder.value}</span>}
+    </div>
+  )
+}