adding imput variable description field

web/app/components/app/configuration/config-var/config-modal/index.tsx

@@ -44,7 +44,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
   const { modelConfig } = useContext(ConfigContext)
   const { t } = useTranslation()
   const [tempPayload, setTempPayload] = useState<InputVar>(payload || getNewVarInWorkflow('') as any)
-  const { type, label, variable, options, max_length } = tempPayload
+  const { type, label, var_description, variable, options, max_length } = tempPayload
   const modalRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
     // To fix the first input element auto focus, then directly close modal will raise error
@@ -226,6 +226,13 @@ const ConfigModal: FC<IConfigModalProps> = ({
               placeholder={t('appDebug.variableConfig.inputPlaceholder')!}
             />
           </Field>
+          <Field title={t('appDebug.variableConfig.variableDescription')}>
+            <Input
+              value={var_description as string}
+              onChange={e => handlePayloadChange('var_description')(e.target.value)}
+              placeholder={t('appDebug.variableConfig.inputPlaceholder')!}
+            />
+          </Field>
 
           {isStringInput && (
             <Field title={t('appDebug.variableConfig.maxLength')}>

web/app/components/workflow/types.ts

@@ -196,6 +196,7 @@ export type InputVar = {
     variable: string
     isChatVar?: boolean
   }
+  var_description: string
   variable: string
   max_length?: number
   default?: string

web/i18n/en-US/app-debug.ts

@@ -369,6 +369,7 @@ const translation = {
     'apiBasedVar': 'API-based Variable',
     'varName': 'Variable Name',
     'labelName': 'Label Name',
+    'variableDescription': 'Variable Description',
     'inputPlaceholder': 'Please input',
     'content': 'Content',
     'required': 'Required',