dify/web/app/components/workflow/panel/inputs-panel.tsx

import type { StartNodeType } from '../nodes/start/types'
import { Button } from '@langgenius/dify-ui/button'
import { memo, useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useNodes } from 'reactflow'
import { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input-forms-hooks'
import { getProcessedInputs } from '@/app/components/base/chat/chat/utils'
import { TransferMethod } from '../../base/text-generation/types'
import { useWorkflowRun } from '../hooks'
import { useHooksStore } from '../hooks-store'
import FormItem from '../nodes/_base/components/before-run-form/form-item'
import { useStore, useWorkflowStore } from '../store'
import { BlockEnum, InputVarType, WorkflowRunningStatus } from '../types'

type Props = Readonly<{
  onRun: () => void
}>

const InputsPanel = ({ onRun }: Props) => {
  const { t } = useTranslation()
  const workflowStore = useWorkflowStore()
  const inputs = useStore((s) => s.inputs)
  const fileSettings = useHooksStore((s) => s.configsMap?.fileSettings)
  const canRunWorkflow = useHooksStore((s) => s.accessControl.canRun)
  const nodes = useNodes<StartNodeType>()
  const files = useStore((s) => s.files)
  const workflowRunningData = useStore((s) => s.workflowRunningData)
  const { handleRun } = useWorkflowRun()
  const startNode = nodes.find((node) => node.data.type === BlockEnum.Start)
  const startVariables = startNode?.data.variables
  const { checkInputsForm } = useCheckInputsForms()

  const initialInputs = useMemo(() => {
    const result = { ...inputs }
    if (startVariables) {
      startVariables.forEach((variable) => {
        if (variable.default) result[variable.variable] = variable.default
        if (inputs[variable.variable] !== undefined)
          result[variable.variable] = inputs[variable.variable]!
      })
    }
    return result
  }, [inputs, startVariables])

  const variables = useMemo(() => {
    const data = startVariables || []
    if (fileSettings?.image?.enabled) {
      return [
        ...data,
        {
          type: InputVarType.files,
          variable: '__image',
          required: false,
          label: 'files',
        },
      ]
    }

    return data
  }, [fileSettings?.image?.enabled, startVariables])

  const handleValueChange = (variable: string, v: any) => {
    const { inputs, setInputs } = workflowStore.getState()
    if (variable === '__image') {
      workflowStore.setState({
        files: v,
      })
    } else {
      setInputs({
        ...inputs,
        [variable]: v,
      })
    }
  }

  const canRun = useMemo(() => {
    const canUploadReady = !files?.some(
      (item) => (item.transfer_method as any) === TransferMethod.local_file && !item.upload_file_id,
    )
    return canRunWorkflow && canUploadReady
  }, [canRunWorkflow, files])

  const doRun = useCallback(() => {
    if (!canRun) return
    if (!checkInputsForm(initialInputs, variables as any)) return
    onRun()
    handleRun({ inputs: getProcessedInputs(initialInputs, variables as any), files })
  }, [canRun, files, handleRun, initialInputs, onRun, variables, checkInputsForm])

  return (
    <>
      <div className="px-4 pt-3 pb-2">
        {variables.map((variable, index) => (
          <div key={variable.variable} className="mb-2 last-of-type:mb-0">
            <FormItem
              autoFocus={index === 0}
              className="block!"
              payload={variable}
              value={initialInputs[variable.variable]}
              onChange={(v) => handleValueChange(variable.variable, v)}
            />
          </div>
        ))}
      </div>
      <div className="flex items-center justify-between px-4 py-2">
        <Button
          variant="primary"
          disabled={
            !canRun || workflowRunningData?.result?.status === WorkflowRunningStatus.Running
          }
          className="w-full"
          onClick={doRun}
        >
          {t(($) => $['singleRun.startRun'], { ns: 'workflow' })}
        </Button>
      </div>
    </>
  )
}

export default memo(InputsPanel)