output var validate keyAlreadyExists. This behavior prevent input. when outputs have same prefix.

[aixgeek]

Self Checks

• This is only for bug report, if you would like to ask a question, please head to Discussions.
• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• Please do not modify this template :) and fill in all the required fields.

Dify version

0.6.11

Cloud or Self Hosted

Cloud, Self Hosted (Docker), Self Hosted (Source)

Steps to reproduce

output var validate keyAlreadyExists. This behavior prevent input. when outputs have same prefix.
e.g.
result
result_b

I can't input result_b, because result is exists. Normally, the validation should be after blur confirm, not in input changing.

✔️ Expected Behavior

validate in blur, not in change.

❌ Actual Behavior

validate in change. I can't change, delete, input...

[dosubot]

To resolve the issue in Dify version 0.6.11 where validation of output variables with the same prefix prevents input, and to ensure that validation occurs on blur rather than during input changes, you can modify the handleVarKeyBlur function in the ConfigModal component. The handleVarKeyBlur function is already set up to perform validation on blur. Here is the relevant part of the code:

const handleVarKeyBlur = useCallback((e: any) => {
    if (tempPayload.label)
      return

    setTempPayload((prev) => {
      return {
        ...prev,
        label: e.target.value,
      }
    })
}, [tempPayload])

This function updates the label field of tempPayload when the input field loses focus (on blur). Additionally, the handlePayloadChange function ensures that validation occurs when the variable field is changed:

const handlePayloadChange = useCallback((key: string) => {
    return (value: any) => {
      if (key === 'variable') {
        const { isValid, errorKey, errorMessageKey } = checkKeys([value], true)
        if (!isValid) {
          Toast.notify({
            type: 'error',
            message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
          })
          return
        }
      }
      setTempPayload((prev) => {
        const newPayload = {
          ...prev,
          [key]: value,
        }

        return newPayload
      })
    }
}, [t])

This ensures that validation occurs on blur rather than during input changes, and prevents input issues with variables having the same prefix ^[1][2].

To continue talking to Dosu, mention @dosu.

[crazywoola]

You just input 2 arg1 in the image, and please provide the DSL accordingly.

[aixgeek]

I mean output var, not input var.