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 } 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 = {
  inputs: Inputs
}

const ChatUserInput = ({
  inputs,
}: Props) => {
  const { t } = useTranslation()
  const { modelConfig, setInputs, readonly } = useContext(ConfigContext)

  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 (!(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={readonly}
                  />
                )}
                {type === 'paragraph' && (
                  <Textarea
                    className="h-[120px] grow"
                    aria-label={name || key}
                    placeholder={name}
                    value={inputs[key] ? `${inputs[key]}` : ''}
                    onValueChange={(value) => { handleInputValueChange(key, value) }}
                    readOnly={readonly}
                  />
                )}
                {type === 'select' && (
                  <Select
                    value={inputs[key] ? String(inputs[key]) : null}
                    disabled={readonly}
                    onValueChange={(nextValue) => {
                      if (!nextValue)
                        return
                      handleInputValueChange(key, nextValue)
                    }}
                  >
                    <SelectTrigger className="w-full">
                      {String(inputs[key] || 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={readonly}
                  />
                )}
                {type === 'checkbox' && (
                  <BoolInput
                    name={name || key}
                    value={!!inputs[key]}
                    required={required}
                    onChange={(value) => { handleInputValueChange(key, value) }}
                    readonly={readonly}
                  />
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default ChatUserInput