From 062896cb9c50d9b2d9445e879f2fc69e04fd28e1 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 26 Dec 2025 12:55:46 +0800
Subject: [PATCH] refactor: enhance Markdown component and update
 FormContentPreview props

---
 web/app/components/base/markdown/index.tsx             |  8 +++++++-
 .../human-input/components/form-content-preview.tsx    |  5 +++--
 .../components/workflow/nodes/human-input/panel.tsx    | 10 +++++++++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx
index 18467e5268..8b6728f246 100644
--- a/web/app/components/base/markdown/index.tsx
+++ b/web/app/components/base/markdown/index.tsx
@@ -29,7 +29,13 @@ export const Markdown = (props: MarkdownProps) => {
 
   return (
     <div className={cn('markdown-body', '!text-text-primary', props.className)}>
-      <ReactMarkdown pluginInfo={pluginInfo} latexContent={latexContent} customComponents={customComponents} customDisallowedElements={props.customDisallowedElements} />
+      <ReactMarkdown
+        pluginInfo={pluginInfo}
+        latexContent={latexContent}
+        customComponents={customComponents}
+        customDisallowedElements={props.customDisallowedElements}
+        rehypePlugins={props.rehypePlugins}
+      />
     </div>
   )
 }
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 14a7b026b8..cffa54ec3c 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
@@ -14,14 +14,14 @@ import { Note, rehypeNotes, rehypeVariable, Variable } from './variable-in-markd
 
 const i18nPrefix = 'workflow.nodes.humanInput'
 
-type Props = {
+type FormContentPreviewProps = {
   content: string
   formInputs: FormInputItem[]
   userActions: UserAction[]
   onClose: () => void
 }
 
-const FormContentPreview: FC<Props> = ({
+const FormContentPreview: FC<FormContentPreviewProps> = ({
   content,
   formInputs,
   userActions,
@@ -85,4 +85,5 @@ const FormContentPreview: FC<Props> = ({
     </div>
   )
 }
+
 export default React.memo(FormContentPreview)
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 1164f0de41..0256e18cb3 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -95,7 +95,15 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
             />
           </div>
           <div className="flex items-center ">
-            <Button variant="ghost" className="flex items-center space-x-1 px-2 text-components-button-ghost-text" onClick={togglePreview}>
+            <Button
+              variant="ghost"
+              size="small"
+              className={cn(
+                'flex items-center space-x-1 px-2',
+                isPreview && 'bg-state-accent-active text-text-accent',
+              )}
+              onClick={togglePreview}
+            >
               <RiEyeLine className="size-3.5" />
               <div className="system-xs-medium">{t(`${i18nPrefix}.formContent.preview`)}</div>
             </Button>