From 8f2660cea8bbfd1a22899a18de84d22c18c2aa3b Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 17 Nov 2025 14:56:45 +0800
Subject: [PATCH] fix markdown props

---
 web/app/components/base/markdown/index.tsx    |  2 +-
 .../base/markdown/react-markdown-wrapper.tsx  |  2 ++
 .../use-workflow-node-human-input-required.ts |  6 ++--
 .../variable/var-reference-picker.tsx         |  6 ++--
 .../workflow/nodes/human-input/default.ts     |  2 ++
 .../workflow/panel/human-input-info.tsx       | 33 +++++++++++++++++++
 .../workflow/panel/workflow-preview.tsx       |  1 +
 .../workflow/store/workflow/workflow-slice.ts |  2 ++
 8 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 web/app/components/workflow/panel/human-input-info.tsx

diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx
index bb49fe1b14..5917a3ab85 100644
--- a/web/app/components/base/markdown/index.tsx
+++ b/web/app/components/base/markdown/index.tsx
@@ -18,7 +18,7 @@ export type MarkdownProps = {
   content: string
   className?: string
   pluginInfo?: SimplePluginInfo
-} & Pick<ReactMarkdownWrapperProps, 'customComponents' | 'customDisallowedElements'>
+} & Pick<ReactMarkdownWrapperProps, 'customComponents' | 'customDisallowedElements' | 'rehypePlugins'>
 
 export const Markdown = (props: MarkdownProps) => {
   const { customComponents = {}, pluginInfo } = props
diff --git a/web/app/components/base/markdown/react-markdown-wrapper.tsx b/web/app/components/base/markdown/react-markdown-wrapper.tsx
index 22964ec04f..df111d43e2 100644
--- a/web/app/components/base/markdown/react-markdown-wrapper.tsx
+++ b/web/app/components/base/markdown/react-markdown-wrapper.tsx
@@ -22,6 +22,7 @@ export type ReactMarkdownWrapperProps = {
   customDisallowedElements?: string[]
   customComponents?: Record<string, React.ComponentType<any>>
   pluginInfo?: SimplePluginInfo
+  rehypePlugins?: any// js: PluggableList[]
 }
 
 export const ReactMarkdownWrapper: FC<ReactMarkdownWrapperProps> = (props) => {
@@ -55,6 +56,7 @@ export const ReactMarkdownWrapper: FC<ReactMarkdownWrapperProps> = (props) => {
             tree.children.forEach(iterate)
           }
         },
+        ...(props.rehypePlugins || []),
       ]}
       urlTransform={customUrlTransform}
       disallowedElements={['iframe', 'head', 'html', 'meta', 'link', 'style', 'body', ...(props.customDisallowedElements || [])]}
diff --git a/web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-human-input-required.ts b/web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-human-input-required.ts
index 6139be4d52..82375e2e3e 100644
--- a/web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-human-input-required.ts
+++ b/web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-human-input-required.ts
@@ -6,7 +6,7 @@ import { produce } from 'immer'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import type { HumanInputRequiredResponse } from '@/types/workflow'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+// import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 
 export const useWorkflowNodeHumanInputRequired = () => {
   const workflowStore = useWorkflowStore()
@@ -27,13 +27,15 @@ export const useWorkflowNodeHumanInputRequired = () => {
     const newNodes = produce(nodes, (draft) => {
       draft[currentNodeIndex].data._runningStatus = NodeRunningStatus.Suspended
       // draft[currentNodeIndex].data._waitingRun = false
+      // store form data & input form schema
     })
     setNodes(newNodes)
 
+    // cache form data & generate input form UI in node data
     setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
       draft.result = {
         ...draft.result,
-        status: WorkflowRunningStatus.Suspended,
+        // status: WorkflowRunningStatus.Suspended, // human input required !== workflow  'Suspended'
       }
     }))
   }, [workflowStore])
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index 5f0c03716f..f926583d43 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -71,6 +71,7 @@ type Props = {
   availableVars?: NodeOutPutVar[]
   isAddBtnTrigger?: boolean
   trigger?: React.ReactNode
+  isJustShowValue?: boolean
   schema?: Partial<CredentialFormSchema>
   valueTypePlaceHolder?: string
   isInTable?: boolean
@@ -104,6 +105,7 @@ const VarReferencePicker: FC<Props> = ({
   availableNodes: passedInAvailableNodes,
   availableVars: passedInAvailableVars,
   trigger,
+  isJustShowValue,
   isAddBtnTrigger,
   schema,
   valueTypePlaceHolder,
@@ -432,7 +434,7 @@ const VarReferencePicker: FC<Props> = ({
                     <AddButton onClick={noop}></AddButton>
                   </div>
                 )
-                : (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'group/wrap relative flex h-8 w-full items-center', !isSupportConstantValue && 'rounded-lg bg-components-input-bg-normal p-1', isInTable && 'border-none bg-transparent', readonly && 'bg-components-input-bg-disabled')}>
+                : (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'group/wrap relative flex h-8 w-full items-center', !isSupportConstantValue && 'rounded-lg bg-components-input-bg-normal p-1', isInTable && 'border-none bg-transparent', readonly && 'bg-components-input-bg-disabled', isJustShowValue && 'h-6 bg-transparent p-0')}>
                   {isSupportConstantValue
                     ? <div onClick={(e) => {
                       e.stopPropagation()
@@ -544,7 +546,7 @@ const VarReferencePicker: FC<Props> = ({
 
                       </VarPickerWrap>
                     )}
-                  {(hasValue && !readonly && !isInTable) && (<div
+                  {(hasValue && !readonly && !isInTable && !isJustShowValue) && (<div
                     className='group invisible absolute right-1 top-[50%] h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 hover:bg-state-base-hover group-hover/wrap:visible'
                     onClick={handleClearVar}
                   >
diff --git a/web/app/components/workflow/nodes/human-input/default.ts b/web/app/components/workflow/nodes/human-input/default.ts
index 933321328b..402da119dc 100644
--- a/web/app/components/workflow/nodes/human-input/default.ts
+++ b/web/app/components/workflow/nodes/human-input/default.ts
@@ -18,10 +18,12 @@ const nodeDefault: NodeDefault<HumanInputNodeType> = {
   defaultValue: {
     delivery_methods: [
       {
+        id: 'webapp-method',
         type: DeliveryMethodType.WebApp,
         enabled: true,
       },
       {
+        id: 'email-method',
         type: DeliveryMethodType.Email,
         enabled: false,
       },
diff --git a/web/app/components/workflow/panel/human-input-info.tsx b/web/app/components/workflow/panel/human-input-info.tsx
new file mode 100644
index 0000000000..70d3899765
--- /dev/null
+++ b/web/app/components/workflow/panel/human-input-info.tsx
@@ -0,0 +1,33 @@
+import { memo } from 'react'
+// import { useStore } from '../store'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import { BlockEnum } from '../types'
+
+type props = {
+  nodeID: string
+  nodeTitle: string
+  formData: any
+}
+
+const HumanInputInfo = ({ nodeTitle }: props) => {
+  // const historyWorkflowData = useStore(s => s.historyWorkflowData)
+
+  return (
+    <div className='rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-2 shadow-xs'>
+      <div className='p-2'>
+        {/* node icon */}
+        <BlockIcon
+          type={BlockEnum.HumanInput}
+          // toolIcon={triggerIcon}
+        />
+        {/* node name */}
+        <div className='system-sm-semibold-uppercase text-text-primary'>{nodeTitle}</div>
+      </div>
+      <div>
+        {/* human input form content */}
+      </div>
+    </div>
+  )
+}
+
+export default memo(HumanInputInfo)
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index 292a964b9e..3ea3ee91b8 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -167,6 +167,7 @@ const WorkflowPreview = () => {
           )}
           {currentTab === 'RESULT' && (
             <>
+              {/* human input form position */}
               <ResultText
                 isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result}
                 outputs={workflowRunningData?.resultText}
diff --git a/web/app/components/workflow/store/workflow/workflow-slice.ts b/web/app/components/workflow/store/workflow/workflow-slice.ts
index 35eeff07a7..3147c9fa06 100644
--- a/web/app/components/workflow/store/workflow/workflow-slice.ts
+++ b/web/app/components/workflow/store/workflow/workflow-slice.ts
@@ -9,6 +9,8 @@ import type { FileUploadConfigResponse } from '@/models/common'
 type PreviewRunningData = WorkflowRunningData & {
   resultTabActive?: boolean
   resultText?: string
+  // human input form schema or data cached when node is in 'Suspended' status
+  extraContentAndFormData?: Record<string, any>
 }
 
 export type WorkflowSliceShape = {