diff --git a/web/app/components/base/chat/chat/answer/human-input-content/content-item.tsx b/web/app/components/base/chat/chat/answer/human-input-content/content-item.tsx index 35ada6d907..f7b541c10a 100644 --- a/web/app/components/base/chat/chat/answer/human-input-content/content-item.tsx +++ b/web/app/components/base/chat/chat/answer/human-input-content/content-item.tsx @@ -1,111 +1,60 @@ -import React from 'react' +import React, { useMemo } from 'react' import { Markdown } from '@/app/components/base/markdown' -import Select from '@/app/components/base/select' import Textarea from '@/app/components/base/textarea' -import Input from '@/app/components/base/input' -import FormInputBoolean from '@/app/components/workflow/nodes/_base/components/form-input-boolean' -import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader' -import { getProcessedFiles } from '@/app/components/base/file-uploader/utils' -import { DEFAULT_VALUE_MAX_LEN } from '@/config' -import type { GeneratedFormInputItem } from '@/app/components/workflow/nodes/human-input/types' +import type { ContentItemProps } from './type' -type Props = { - content: string - formInputFields: GeneratedFormInputItem[] - inputs: Record - onInputChange: (name: string, value: any) => void -} - -const ContentItem = ({ content, formInputFields, inputs, onInputChange }: Props) => { +const ContentItem = ({ + content, + formInputFields, + inputs, + resolvedPlaceholderValues, + onInputChange, +}: ContentItemProps) => { const isInputField = (field: string) => { const outputVarRegex = /{{#\$output\.[^#]+#}}/ return outputVarRegex.test(field) } - const extractFieldName = (str: string) => { + const extractFieldName = (str: string): string => { const outputVarRegex = /{{#\$output\.([^#]+)#}}/ const match = str.match(outputVarRegex) return match ? match[1] : '' } + const fieldName = useMemo(() => { + return extractFieldName(content) + }, [content]) + + const formInputField = useMemo(() => { + return formInputFields.find(field => field.output_variable_name === fieldName) + }, [formInputFields, fieldName]) + + const placeholder = useMemo(() => { + return formInputField?.placeholder.type === 'variable' + ? resolvedPlaceholderValues?.[fieldName] + : formInputField?.placeholder.value + }, [formInputField, resolvedPlaceholderValues, fieldName]) + if (!isInputField(content)) { return ( ) } - const fieldName = extractFieldName(content) - const formInputField = formInputFields.find(field => field.output_variable_name === fieldName) - if (!formInputField) return null return (
- {formInputField.type === 'select' && ( - { onInputChange(fieldName, e.target.value) }} - maxLength={formInputField.max_length || DEFAULT_VALUE_MAX_LEN} - /> - )} {formInputField.type === 'paragraph' && (