dify/web/app/components/app/configuration/debug/chat-user-input.tsx

import type { Inputs } from '@/models/debug'
import { cn } from '@langgenius/dify-ui/cn'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectItemIndicator,
  SelectItemText,
  SelectTrigger,
  SelectValue,
} from '@langgenius/dify-ui/select'
import { Textarea } from '@langgenius/dify-ui/textarea'
import * as React from 'react'
import { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import Input from '@/app/components/base/input'
import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
import ConfigContext from '@/context/debug-configuration'

type Props = Readonly<{
  inputs: Inputs
}>

const ChatUserInput = ({ inputs }: Props) => {
  const { t } = useTranslation()
  const { modelConfig, setInputs, canTestAndRun = false } = useContext(ConfigContext)
  const debugInputReadonly = !canTestAndRun

  const promptVariables = modelConfig.configs.prompt_variables.filter(({ key, name }) => {
    return key && key?.trim() && name && name?.trim()
  })

  const promptVariableObj = (() => {
    const obj: Record<string, boolean> = {}
    promptVariables.forEach((input) => {
      obj[input.key] = true
    })
    return obj
  })()

  // Initialize inputs with default values from promptVariables
  useEffect(() => {
    const newInputs = { ...inputs }
    let hasChanges = false

    promptVariables.forEach((variable) => {
      const { key, default: defaultValue } = variable
      // Only set default value if the field is empty and a default exists
      if (
        defaultValue !== undefined &&
        defaultValue !== null &&
        defaultValue !== '' &&
        (inputs[key] === undefined || inputs[key] === null || inputs[key] === '')
      ) {
        newInputs[key] = defaultValue
        hasChanges = true
      }
    })

    if (hasChanges) setInputs(newInputs)
  }, [promptVariables, inputs, setInputs])

  const handleInputValueChange = (key: string, value: string | boolean) => {
    if (debugInputReadonly) return
    if (!(key in promptVariableObj)) return

    const newInputs = { ...inputs }
    promptVariables.forEach((input) => {
      if (input.key === key) newInputs[key] = value
    })
    setInputs(newInputs)
  }

  if (!promptVariables.length) return null

  return (
    <div
      className={cn(
        'z-1 rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs',
      )}
    >
      <div className="px-4 pt-3 pb-4">
        {promptVariables.map(({ key, name, type, options, max_length, required }, index) => (
          <div key={key} className="mb-4 last-of-type:mb-0">
            <div>
              {type !== 'checkbox' && (
                <div className="mb-1 flex h-6 items-center gap-1 system-sm-semibold text-text-secondary">
                  <div className="truncate">{name || key}</div>
                  {!required && (
                    <span className="system-xs-regular text-text-tertiary">
                      {t(($) => $['panel.optional'], { ns: 'workflow' })}
                    </span>
                  )}
                </div>
              )}
              <div className="grow">
                {type === 'string' && (
                  <Input
                    value={inputs[key] ? `${inputs[key]}` : ''}
                    onChange={(e) => {
                      handleInputValueChange(key, e.target.value)
                    }}
                    placeholder={name}
                    autoFocus={index === 0}
                    maxLength={max_length}
                    readOnly={debugInputReadonly}
                  />
                )}
                {type === 'paragraph' && (
                  <Textarea
                    className="h-30 grow"
                    aria-label={name || key}
                    placeholder={name}
                    value={inputs[key] ? `${inputs[key]}` : ''}
                    onValueChange={(value) => {
                      handleInputValueChange(key, value)
                    }}
                    readOnly={debugInputReadonly}
                  />
                )}
                {type === 'select' && (
                  <Select<string>
                    value={
                      typeof inputs[key] === 'string' && inputs[key] !== '' ? inputs[key] : null
                    }
                    disabled={debugInputReadonly}
                    onValueChange={(nextValue) => {
                      if (nextValue == null || nextValue === '') return
                      handleInputValueChange(key, nextValue)
                    }}
                  >
                    <SelectTrigger className="w-full">
                      <SelectValue
                        placeholder={t(($) => $['placeholder.select'], { ns: 'common' })}
                      />
                    </SelectTrigger>
                    <SelectContent>
                      {(options || []).map((option) => (
                        <SelectItem key={option} value={option}>
                          <SelectItemText>{option}</SelectItemText>
                          <SelectItemIndicator />
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
                {type === 'number' && (
                  <Input
                    type="number"
                    value={inputs[key] ? `${inputs[key]}` : ''}
                    onChange={(e) => {
                      handleInputValueChange(key, e.target.value)
                    }}
                    placeholder={name}
                    autoFocus={index === 0}
                    maxLength={max_length}
                    readOnly={debugInputReadonly}
                  />
                )}
                {type === 'checkbox' && (
                  <BoolInput
                    name={name || key}
                    value={!!inputs[key]}
                    required={required}
                    onChange={(value) => {
                      handleInputValueChange(key, value)
                    }}
                    readonly={debugInputReadonly}
                  />
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default ChatUserInput