From 29cad80e62770b3a598b944a390305be9e04bc04 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 22 Apr 2026 08:24:44 +0800
Subject: [PATCH] Prefer structured submitted human input data

---
 .../__tests__/submitted.spec.tsx              | 16 +++++++++
 .../submitted-field-values.tsx                | 34 ++++++++++++++-----
 .../answer/human-input-content/submitted.tsx  |  7 ++--
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/web/app/components/base/chat/chat/answer/human-input-content/__tests__/submitted.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/__tests__/submitted.spec.tsx
index 69f5054704..24960c0837 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/__tests__/submitted.spec.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/__tests__/submitted.spec.tsx
@@ -28,4 +28,20 @@ describe('SubmittedHumanInputContent Integration', () => {
     // Trans component for triggered action. The mock usually renders the key.
     expect(screen.getByText('nodes.humanInput.userActions.triggered')).toBeInTheDocument()
   })
+
+  it('should prefer structured form data over rendered markdown when available', () => {
+    render(
+      <SubmittedHumanInputContent formData={{
+        ...mockFormData,
+        form_data: {
+          answer: 'approved',
+        },
+      }}
+      />,
+    )
+
+    expect(screen.getByTestId('submitted-field-values')).toBeInTheDocument()
+    expect(screen.getByTestId('submitted-field-answer')).toHaveTextContent('approved')
+    expect(screen.queryByTestId('submitted-content')).not.toBeInTheDocument()
+  })
 })
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/submitted-field-values.tsx b/web/app/components/base/chat/chat/answer/human-input-content/submitted-field-values.tsx
index acfa0658ea..3e059bb635 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/submitted-field-values.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/submitted-field-values.tsx
@@ -9,7 +9,7 @@ import {
 } from '@/app/components/workflow/nodes/human-input/types'
 
 type SubmittedFieldValuesProps = {
-  fields: FormInputItem[]
+  fields?: FormInputItem[]
   values: Record<string, HumanInputFormValue>
 }
 
@@ -17,20 +17,36 @@ const SubmittedFieldValues = ({
   fields,
   values,
 }: SubmittedFieldValuesProps) => {
+  const fieldNames = fields?.map(field => field.output_variable_name) ?? Object.keys(values)
+  const fieldMap = new Map(fields?.map(field => [field.output_variable_name, field]) ?? [])
+
   return (
     <div className="flex flex-col gap-3" data-testid="submitted-field-values">
-      {fields.map((field) => {
-        const value = values[field.output_variable_name]
+      {fieldNames.map((fieldName) => {
+        const field = fieldMap.get(fieldName)
+        const value = values[fieldName]
 
         if (value == null)
           return null
 
-        if (isFileFormInput(field)) {
+        let valueKind: 'text' | 'file' | 'file-list' = 'text'
+        if (field && isFileFormInput(field))
+          valueKind = 'file'
+        else if (field && isFileListFormInput(field))
+          valueKind = 'file-list'
+        else if (typeof value === 'string')
+          valueKind = 'text'
+        else if (Array.isArray(value))
+          valueKind = 'file-list'
+        else
+          valueKind = 'file'
+
+        if (valueKind === 'file') {
           if (typeof value === 'string' || Array.isArray(value))
             return null
 
           return (
-            <div key={field.output_variable_name} data-testid={`submitted-field-${field.output_variable_name}`}>
+            <div key={fieldName} data-testid={`submitted-field-${fieldName}`}>
               <FileList
                 files={getProcessedFilesFromResponse([value])}
                 showDeleteAction={false}
@@ -40,12 +56,12 @@ const SubmittedFieldValues = ({
           )
         }
 
-        if (isFileListFormInput(field)) {
+        if (valueKind === 'file-list') {
           if (typeof value === 'string' || !Array.isArray(value))
             return null
 
           return (
-            <div key={field.output_variable_name} data-testid={`submitted-field-${field.output_variable_name}`}>
+            <div key={fieldName} data-testid={`submitted-field-${fieldName}`}>
               <FileList
                 files={getProcessedFilesFromResponse(value)}
                 showDeleteAction={false}
@@ -57,9 +73,9 @@ const SubmittedFieldValues = ({
 
         return (
           <div
-            key={field.output_variable_name}
+            key={fieldName}
             className="body-md-regular break-words text-text-primary"
-            data-testid={`submitted-field-${field.output_variable_name}`}
+            data-testid={`submitted-field-${fieldName}`}
           >
             {String(value)}
           </div>
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/submitted.tsx b/web/app/components/base/chat/chat/answer/human-input-content/submitted.tsx
index bf598d4c5d..744d4d826a 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/submitted.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/submitted.tsx
@@ -2,11 +2,12 @@ import type { SubmittedHumanInputContentProps } from './type'
 import { useMemo } from 'react'
 import ExecutedAction from './executed-action'
 import SubmittedContent from './submitted-content'
+import SubmittedFieldValues from './submitted-field-values'
 
 export const SubmittedHumanInputContent = ({
   formData,
 }: SubmittedHumanInputContentProps) => {
-  const { rendered_content, action_id, action_text } = formData
+  const { rendered_content, action_id, action_text, form_data } = formData
 
   const executedAction = useMemo(() => {
     return {
@@ -17,7 +18,9 @@ export const SubmittedHumanInputContent = ({
 
   return (
     <>
-      <SubmittedContent content={rendered_content} />
+      {form_data && Object.keys(form_data).length > 0
+        ? <SubmittedFieldValues values={form_data} />
+        : <SubmittedContent content={rendered_content} />}
       {/* Executed Action */}
       <ExecutedAction executedAction={executedAction} />
     </>