kanshan/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-02-20 01:44:42 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix: display node name in form content preview

Browse Source
This commit is contained in:
JzoNg 2026-01-21 14:57:16 +08:00
parent c42b78f2d2
commit 757b1c7190
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
View File

@ -11,6 +11,7 @@ import Button from '@/app/components/base/button'
import { getButtonStyle } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
import { Markdown } from '@/app/components/base/markdown'
import { useStore } from '@/app/components/workflow/store'
import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
import { Note, rehypeNotes, rehypeVariable, Variable } from './variable-in-markdown'
const i18nPrefix = 'nodes.humanInput'
@ -30,6 +31,12 @@ const FormContentPreview: FC<FormContentPreviewProps> = ({
}) => {
const { t } = useTranslation()
const panelWidth = useStore(state => state.panelWidth)
const nodes = useNodes()
const nodeName = React.useCallback((nodeId: string) => {
const node = nodes.find(n => n.id === nodeId)
return node?.data.title || nodeId
}, [nodes])
return (
<div
@ -47,9 +54,16 @@ const FormContentPreview: FC<FormContentPreviewProps> = ({
content={content}
rehypePlugins={[rehypeVariable, rehypeNotes]}
customComponents={{
variable: ({ node }: { node: { properties?: { [key: string]: string } } }) => (
<Variable path={node.properties?.['data-path'] as string} />
),
variable: ({ node }: { node: { properties?: { [key: string]: string } } }) => {
const path = node.properties?.['data-path'] as string
let newPath = path
if (path) {
newPath = path.replace(/#([^#.]+)([.#])/g, (match, nodeId, sep) => {
return `#${nodeName(nodeId)}${sep}`
})
}
return <Variable path={newPath} />
},
section: ({ node }: { node: { properties?: { [key: string]: string } } }) => (() => {
const name = node.properties?.['data-name'] as string
const input = formInputs.find(i => i.output_variable_name === name)

2
web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
View File

@ -126,7 +126,7 @@ export const Variable: React.FC<{ path: string }> = ({ path }) => {
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">
<div className="my-3 rounded-[10px] bg-components-input-bg-normal px-2.5 py-2">
{isVariable ? <Variable path={`{{${placeholder.selector.join('.')}}}`} /> : <span>{placeholder.value}</span>}
</div>
)