|
|
|
|
@ -37,7 +37,6 @@ const typeList = [
|
|
|
|
|
ChatVarType.ArrayString,
|
|
|
|
|
ChatVarType.ArrayNumber,
|
|
|
|
|
ChatVarType.ArrayObject,
|
|
|
|
|
ChatVarType.ArrayFile,
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
const objectPlaceholder = `# example
|
|
|
|
|
@ -128,7 +127,6 @@ const ChatVariableModal = ({
|
|
|
|
|
case ChatVarType.ArrayString:
|
|
|
|
|
case ChatVarType.ArrayNumber:
|
|
|
|
|
case ChatVarType.ArrayObject:
|
|
|
|
|
case ChatVarType.ArrayFile:
|
|
|
|
|
return value?.filter(Boolean) || []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -296,86 +294,84 @@ const ChatVariableModal = ({
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{/* default value */}
|
|
|
|
|
{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'
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
{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}
|
|
|
|
|
<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}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
{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>
|
|
|
|
|
)}
|
|
|
|
|
</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>
|
|
|
|
|
|