|  |  | @@ -37,6 +37,7 @@ const typeList = [ | 
		
	
		
			
			|  |  |  | ChatVarType.ArrayString, | 
		
	
		
			
			|  |  |  | ChatVarType.ArrayNumber, | 
		
	
		
			
			|  |  |  | ChatVarType.ArrayObject, | 
		
	
		
			
			|  |  |  | ChatVarType.ArrayFile, | 
		
	
		
			
			|  |  |  | ] | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const objectPlaceholder = `#  example | 
		
	
	
		
			
			|  |  | @@ -127,6 +128,7 @@ const ChatVariableModal = ({ | 
		
	
		
			
			|  |  |  | case ChatVarType.ArrayString: | 
		
	
		
			
			|  |  |  | case ChatVarType.ArrayNumber: | 
		
	
		
			
			|  |  |  | case ChatVarType.ArrayObject: | 
		
	
		
			
			|  |  |  | case ChatVarType.ArrayFile: | 
		
	
		
			
			|  |  |  | return value?.filter(Boolean) || [] | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
	
		
			
			|  |  | @@ -294,84 +296,86 @@ const ChatVariableModal = ({ | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | {/* default value */} | 
		
	
		
			
			|  |  |  | <div className='mb-4'> | 
		
	
		
			
			|  |  |  | <div className='system-sm-semibold mb-1 flex h-6 items-center justify-between text-text-secondary'> | 
		
	
		
			
			|  |  |  | <div>{t('workflow.chatVariable.modal.value')}</div> | 
		
	
		
			
			|  |  |  | {(type === ChatVarType.ArrayString || type === ChatVarType.ArrayNumber) && ( | 
		
	
		
			
			|  |  |  | <Button | 
		
	
		
			
			|  |  |  | variant='ghost' | 
		
	
		
			
			|  |  |  | size='small' | 
		
	
		
			
			|  |  |  | className='text-text-tertiary' | 
		
	
		
			
			|  |  |  | onClick={() => handleEditorChange(!editInJSON)} | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | {editInJSON ? <RiInputField className='mr-1 h-3.5 w-3.5' /> : <RiDraftLine className='mr-1 h-3.5 w-3.5' />} | 
		
	
		
			
			|  |  |  | {editInJSON ? t('workflow.chatVariable.modal.oneByOne') : t('workflow.chatVariable.modal.editInJSON')} | 
		
	
		
			
			|  |  |  | </Button> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {type === ChatVarType.Object && ( | 
		
	
		
			
			|  |  |  | <Button | 
		
	
		
			
			|  |  |  | variant='ghost' | 
		
	
		
			
			|  |  |  | size='small' | 
		
	
		
			
			|  |  |  | className='text-text-tertiary' | 
		
	
		
			
			|  |  |  | onClick={() => handleEditorChange(!editInJSON)} | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | {editInJSON ? <RiInputField className='mr-1 h-3.5 w-3.5' /> : <RiDraftLine className='mr-1 h-3.5 w-3.5' />} | 
		
	
		
			
			|  |  |  | {editInJSON ? t('workflow.chatVariable.modal.editInForm') : t('workflow.chatVariable.modal.editInJSON')} | 
		
	
		
			
			|  |  |  | </Button> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div className='flex'> | 
		
	
		
			
			|  |  |  | {type === ChatVarType.String && ( | 
		
	
		
			
			|  |  |  | // Input will remove \n\r, so use Textarea just like description area | 
		
	
		
			
			|  |  |  | <textarea | 
		
	
		
			
			|  |  |  | className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs' | 
		
	
		
			
			|  |  |  | value={value} | 
		
	
		
			
			|  |  |  | placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''} | 
		
	
		
			
			|  |  |  | onChange={e => setValue(e.target.value)} | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {type === ChatVarType.Number && ( | 
		
	
		
			
			|  |  |  | <Input | 
		
	
		
			
			|  |  |  | placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''} | 
		
	
		
			
			|  |  |  | value={value} | 
		
	
		
			
			|  |  |  | onChange={e => setValue(Number(e.target.value))} | 
		
	
		
			
			|  |  |  | type='number' | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {type === ChatVarType.Object && !editInJSON && ( | 
		
	
		
			
			|  |  |  | <ObjectValueList | 
		
	
		
			
			|  |  |  | list={objectValue} | 
		
	
		
			
			|  |  |  | onChange={setObjectValue} | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {type === ChatVarType.ArrayString && !editInJSON && ( | 
		
	
		
			
			|  |  |  | <ArrayValueList | 
		
	
		
			
			|  |  |  | isString | 
		
	
		
			
			|  |  |  | list={value || [undefined]} | 
		
	
		
			
			|  |  |  | onChange={setValue} | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {type === ChatVarType.ArrayNumber && !editInJSON && ( | 
		
	
		
			
			|  |  |  | <ArrayValueList | 
		
	
		
			
			|  |  |  | isString={false} | 
		
	
		
			
			|  |  |  | list={value || [undefined]} | 
		
	
		
			
			|  |  |  | onChange={setValue} | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {editInJSON && ( | 
		
	
		
			
			|  |  |  | <div className='w-full rounded-[10px] bg-components-input-bg-normal py-2 pl-3 pr-1' style={{ height: editorMinHeight }}> | 
		
	
		
			
			|  |  |  | <CodeEditor | 
		
	
		
			
			|  |  |  | isExpand | 
		
	
		
			
			|  |  |  | noWrapper | 
		
	
		
			
			|  |  |  | language={CodeLanguage.json} | 
		
	
		
			
			|  |  |  | value={editorContent} | 
		
	
		
			
			|  |  |  | placeholder={<div className='whitespace-pre'>{placeholder}</div>} | 
		
	
		
			
			|  |  |  | onChange={handleEditorValueChange} | 
		
	
		
			
			|  |  |  | {type !== ChatVarType.ArrayFile && ( | 
		
	
		
			
			|  |  |  | <div className='mb-4'> | 
		
	
		
			
			|  |  |  | <div className='system-sm-semibold mb-1 flex h-6 items-center justify-between text-text-secondary'> | 
		
	
		
			
			|  |  |  | <div>{t('workflow.chatVariable.modal.value')}</div> | 
		
	
		
			
			|  |  |  | {(type === ChatVarType.ArrayString || type === ChatVarType.ArrayNumber) && ( | 
		
	
		
			
			|  |  |  | <Button | 
		
	
		
			
			|  |  |  | variant='ghost' | 
		
	
		
			
			|  |  |  | size='small' | 
		
	
		
			
			|  |  |  | className='text-text-tertiary' | 
		
	
		
			
			|  |  |  | onClick={() => handleEditorChange(!editInJSON)} | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | {editInJSON ? <RiInputField className='mr-1 h-3.5 w-3.5' /> : <RiDraftLine className='mr-1 h-3.5 w-3.5' />} | 
		
	
		
			
			|  |  |  | {editInJSON ? t('workflow.chatVariable.modal.oneByOne') : t('workflow.chatVariable.modal.editInJSON')} | 
		
	
		
			
			|  |  |  | </Button> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {type === ChatVarType.Object && ( | 
		
	
		
			
			|  |  |  | <Button | 
		
	
		
			
			|  |  |  | variant='ghost' | 
		
	
		
			
			|  |  |  | size='small' | 
		
	
		
			
			|  |  |  | className='text-text-tertiary' | 
		
	
		
			
			|  |  |  | onClick={() => handleEditorChange(!editInJSON)} | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | {editInJSON ? <RiInputField className='mr-1 h-3.5 w-3.5' /> : <RiDraftLine className='mr-1 h-3.5 w-3.5' />} | 
		
	
		
			
			|  |  |  | {editInJSON ? t('workflow.chatVariable.modal.editInForm') : t('workflow.chatVariable.modal.editInJSON')} | 
		
	
		
			
			|  |  |  | </Button> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div className='flex'> | 
		
	
		
			
			|  |  |  | {type === ChatVarType.String && ( | 
		
	
		
			
			|  |  |  | // Input will remove \n\r, so use Textarea just like description area | 
		
	
		
			
			|  |  |  | <textarea | 
		
	
		
			
			|  |  |  | className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs' | 
		
	
		
			
			|  |  |  | value={value} | 
		
	
		
			
			|  |  |  | placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''} | 
		
	
		
			
			|  |  |  | onChange={e => setValue(e.target.value)} | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {type === ChatVarType.Number && ( | 
		
	
		
			
			|  |  |  | <Input | 
		
	
		
			
			|  |  |  | placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''} | 
		
	
		
			
			|  |  |  | value={value} | 
		
	
		
			
			|  |  |  | onChange={e => setValue(Number(e.target.value))} | 
		
	
		
			
			|  |  |  | type='number' | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {type === ChatVarType.Object && !editInJSON && ( | 
		
	
		
			
			|  |  |  | <ObjectValueList | 
		
	
		
			
			|  |  |  | list={objectValue} | 
		
	
		
			
			|  |  |  | onChange={setObjectValue} | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {type === ChatVarType.ArrayString && !editInJSON && ( | 
		
	
		
			
			|  |  |  | <ArrayValueList | 
		
	
		
			
			|  |  |  | isString | 
		
	
		
			
			|  |  |  | list={value || [undefined]} | 
		
	
		
			
			|  |  |  | onChange={setValue} | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {type === ChatVarType.ArrayNumber && !editInJSON && ( | 
		
	
		
			
			|  |  |  | <ArrayValueList | 
		
	
		
			
			|  |  |  | isString={false} | 
		
	
		
			
			|  |  |  | list={value || [undefined]} | 
		
	
		
			
			|  |  |  | onChange={setValue} | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {editInJSON && ( | 
		
	
		
			
			|  |  |  | <div className='w-full rounded-[10px] bg-components-input-bg-normal py-2 pl-3 pr-1' style={{ height: editorMinHeight }}> | 
		
	
		
			
			|  |  |  | <CodeEditor | 
		
	
		
			
			|  |  |  | isExpand | 
		
	
		
			
			|  |  |  | noWrapper | 
		
	
		
			
			|  |  |  | language={CodeLanguage.json} | 
		
	
		
			
			|  |  |  | value={editorContent} | 
		
	
		
			
			|  |  |  | placeholder={<div className='whitespace-pre'>{placeholder}</div>} | 
		
	
		
			
			|  |  |  | onChange={handleEditorValueChange} | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | )} | 
		
	
		
			
			|  |  |  | {/* description */} | 
		
	
		
			
			|  |  |  | <div className=''> | 
		
	
		
			
			|  |  |  | <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.chatVariable.modal.description')}</div> |