refactor: replace GeneratedFormInputItem with FormInputItem across components for consistency

web/app/(humanInputLayout)/form/[token]/form.tsx

@@ -13,7 +13,7 @@ import Button from '@/app/components/base/button'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import ContentItem from '@/app/components/base/chat/chat/answer/human-input-content/content-item'
 import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
-import type { GeneratedFormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
+import type { FormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
 import { getHumanInputForm, submitHumanInputForm } from '@/service/share'
 import { asyncRunSafe } from '@/utils'
 import { cn } from '@/utils/classnames'
@@ -21,7 +21,7 @@ import { cn } from '@/utils/classnames'
 export type FormData = {
   site: any
   form_content: string
-  inputs: GeneratedFormInputItem[]
+  inputs: FormInputItem[]
   user_actions: UserAction[]
   timeout: number
   timeout_unit: 'hour' | 'day'
@@ -61,7 +61,7 @@ const FormContent = () => {
     return parts.filter(part => part.length > 0)
   }
 
-  const initializeInputs = (formInputs: GeneratedFormInputItem[]) => {
+  const initializeInputs = (formInputs: FormInputItem[]) => {
     const initialInputs: Record<string, any> = {}
     formInputs.forEach((item) => {
       if (item.type === 'text-input' || item.type === 'paragraph')

web/app/components/base/chat/chat/answer/human-input-content/type.ts

@@ -1,4 +1,4 @@
-import type { GeneratedFormInputItem } from '@/app/components/workflow/nodes/human-input/types'
+import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
 import type { HumanInputFormData } from '@/types/workflow'
 
 export type ExecutedAction = {
@@ -27,7 +27,7 @@ export type HumanInputFormProps = {
 
 export type ContentItemProps = {
   content: string
-  formInputFields: GeneratedFormInputItem[]
+  formInputFields: FormInputItem[]
   inputs: Record<string, string>
   resolvedPlaceholderValues?: Record<string, string>
   onInputChange: (name: string, value: any) => void

web/app/components/base/chat/chat/answer/human-input-content/utils.ts

@@ -1,4 +1,4 @@
-import type { GeneratedFormInputItem } from '@/app/components/workflow/nodes/human-input/types'
+import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
 import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
 
 export const getButtonStyle = (style: UserActionButtonType) => {
@@ -18,7 +18,7 @@ export const splitByOutputVar = (content: string): string[] => {
   return parts.filter(part => part.length > 0)
 }
 
-export const initializeInputs = (formInputs: GeneratedFormInputItem[]) => {
+export const initializeInputs = (formInputs: FormInputItem[]) => {
   const initialInputs: Record<string, any> = {}
   formInputs.forEach((item) => {
     if (item.type === 'text-input' || item.type === 'paragraph')

web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx

@@ -5,7 +5,6 @@ import { VariableX } from '../../../icons/src/vender/workflow'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
-import { useTranslation } from 'react-i18next'
 import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
 import ActionButton from '../../../action-button'
 import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
@@ -42,7 +41,6 @@ const ComponentUI: FC<Props> = ({
   onRename,
   onRemove,
 }) => {
-  const { t } = useTranslation()
   const [isShowEditModal, {
     setTrue: showEditModal,
     setFalse: hideEditModal,
@@ -89,7 +87,7 @@ const ComponentUI: FC<Props> = ({
         <div className='absolute bottom-1 h-[1.5px] w-full bg-background-default-subtle'></div>
         <div className='relative flex items-center space-x-0.5 px-1 text-text-accent-light-mode-only'>
           <VariableX className='size-3' />
-          <div className='system-xs-medium'>{t('workflow.nodes.humanInput.editor.notes')}</div>
+          <div className='system-xs-medium'>{varName}</div>
         </div>
       </div>
 

web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx

@@ -28,6 +28,7 @@ const HITLInputComponent: FC<Props> = ({
 }) => {
   const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_HITL_INPUT_BLOCK_COMMAND)
   const payload = formInputs.find(item => item.output_variable_name === varName)
+
   const handleChange = useCallback((newPayload: FormInputItem) => {
     if(!payload) {
       onChange([...formInputs, newPayload])
@@ -40,7 +41,8 @@ const HITLInputComponent: FC<Props> = ({
       return
     }
     onChange(formInputs.map(item => item.output_variable_name === varName ? newPayload : item))
-  }, [onChange])
+  }, [formInputs, onChange, payload, varName])
+
   return (
     <div
       ref={ref}

web/app/components/workflow/nodes/human-input/components/single-run-form.tsx

@@ -6,12 +6,12 @@ import { RiArrowLeftLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import ContentItem from '@/app/components/base/chat/chat/answer/human-input-content/content-item'
 import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
-import type { GeneratedFormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
+import type { FormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
 
 type Props = {
   nodeName: string
   formContent: string
-  inputFields: GeneratedFormInputItem[]
+  inputFields: FormInputItem[]
   userActions: UserAction[]
   showBackButton?: boolean
   handleBack?: () => void
@@ -33,7 +33,7 @@ const FormContent = ({
     return parts.filter(part => part.length > 0)
   }
 
-  const initializeInputs = (formInputs: GeneratedFormInputItem[]) => {
+  const initializeInputs = (formInputs: FormInputItem[]) => {
     const initialInputs: Record<string, any> = {}
     formInputs.forEach((item) => {
       if (item.type === 'text-input' || item.type === 'paragraph')

web/app/components/workflow/nodes/human-input/types.ts

@@ -1,4 +1,9 @@
-import type { CommonNodeType, InputVarType, ValueSelector, Variable } from '@/app/components/workflow/types'
+import type {
+  CommonNodeType,
+  InputVarType,
+  ValueSelector,
+  Variable,
+} from '@/app/components/workflow/types'
 
 export type HumanInputNodeType = CommonNodeType & {
   delivery_methods: DeliveryMethod[]
@@ -43,24 +48,6 @@ export type DeliveryMethod = {
   config?: EmailConfig | {} | null
 }
 
-export type FormInputItemPlaceholder = {
-  type: 'variable' | 'constant',
-  selector: ValueSelector
-  value: string
-}
-
-export type FormInputItem = {
-  type: InputVarType
-  output_variable_name: string
-  // only text-input and paragraph support placeholder
-  placeholder?: FormInputItemPlaceholder
-  options?: any[]
-  max_length?: number
-  allowed_file_extensions?: string[]
-  allowed_file_types?: string[]
-  allowed_file_upload_methods?: string[]
-}
-
 export enum UserActionButtonType {
   Primary = 'primary',
   Default = 'default',
@@ -74,12 +61,14 @@ export type UserAction = {
   button_style: UserActionButtonType
 }
 
-export type GeneratedFormInputItem = {
+export type FormInputItemPlaceholder = {
+  selector: ValueSelector
+  type: 'variable' | 'constant'
+  value: string
+}
+
+export type FormInputItem = {
   type: InputVarType
   output_variable_name: string
-  placeholder: {
-    selector: ValueSelector
-    type: 'variable' | 'constant'
-    value: string
-  }
+  placeholder: FormInputItemPlaceholder
 }

web/i18n/en-US/workflow.ts

@@ -1156,7 +1156,6 @@ const translation = {
         useConstantInstead: 'Use Constant Instead',
       },
       editor: {
-        notes: 'notes',
         previewTip: 'In preview mode, action buttons are not functional.',
       },
       errorMsg: {

web/i18n/zh-Hans/workflow.ts

@@ -1112,7 +1112,6 @@ const translation = {
         useConstantInstead: '使用常量代替',
       },
       editor: {
-        notes: ' 笔记',
         previewTip: '在预览模式下，操作按钮无法使用。',
       },
       errorMsg: {

web/service/share.ts

@@ -34,7 +34,7 @@ import type {
 } from '@/models/share'
 import type { ChatConfig } from '@/app/components/base/chat/types'
 import type { AccessMode } from '@/models/access-control'
-import type { GeneratedFormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
+import type { FormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
 import { WEB_APP_SHARE_CODE_HEADER_NAME } from '@/config'
 import { getWebAppAccessToken } from './webapp-auth'
 
@@ -324,7 +324,7 @@ export const getHumanInputForm = (token: string) => {
   return get<{
     site: any
     form_content: string
-    inputs: GeneratedFormInputItem[]
+    inputs: FormInputItem[]
     user_actions: UserAction[]
     timeout: number
     timeout_unit: 'hour' | 'day'

web/types/workflow.ts

@@ -5,7 +5,7 @@ import type { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/
 import type { RAGPipelineVariables } from '@/models/pipeline'
 import type { BeforeRunFormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form'
 import type { SpecialResultPanelProps } from '@/app/components/workflow/run/special-result-panel'
-import type { GeneratedFormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
+import type { FormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
 import type { RefObject } from 'react'
 
 export type AgentLogItem = {
@@ -316,7 +316,7 @@ export type HumanInputFormData = {
   node_id: string
   node_title: string
   form_content: string
-  inputs: GeneratedFormInputItem[]
+  inputs: FormInputItem[]
   actions: UserAction[]
   web_app_form_token: string // For WebApp
   resolved_placeholder_values: Record<string, string> // For human input placeholder when its type is variable