|
|
|
@@ -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> |