| | |
| | | case ChatVarType.Number: |
| | | return value || 0 |
| | | case ChatVarType.Object: |
| | | return editInJSON ? value : formatValueFromObject(objectValue) |
| | | return formatValueFromObject(objectValue) |
| | | case ChatVarType.ArrayString: |
| | | case ChatVarType.ArrayNumber: |
| | | case ChatVarType.ArrayObject: |
| | |
| | | }) |
| | | setObjectValue(newObjectValue) |
| | | } |
| | | catch { |
| | | catch (e) { |
| | | // ignore JSON.parse errors |
| | | } |
| | | } |
| | |
| | | const newValue = JSON.parse(content) |
| | | setValue(newValue) |
| | | } |
| | | catch { |
| | | catch (e) { |
| | | // ignore JSON.parse errors |
| | | } |
| | | } |
| | |
| | | |
| | | return ( |
| | | <div |
| | | className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl', type === ChatVarType.Object && 'w-[480px]')} |
| | | className={cn('flex flex-col w-[360px] bg-components-panel-bg rounded-2xl h-full border-[0.5px] border-components-panel-border shadow-2xl', type === ChatVarType.Object && 'w-[480px]')} |
| | | > |
| | | <div className='system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'> |
| | | <div className='shrink-0 flex items-center justify-between mb-3 p-4 pb-0 text-text-primary system-xl-semibold'> |
| | | {!chatVar ? t('workflow.chatVariable.modal.title') : t('workflow.chatVariable.modal.editTitle')} |
| | | <div className='flex items-center'> |
| | | <div |
| | | className='flex h-6 w-6 cursor-pointer items-center justify-center' |
| | | className='flex items-center justify-center w-6 h-6 cursor-pointer' |
| | | onClick={onClose} |
| | | > |
| | | <RiCloseLine className='h-4 w-4 text-text-tertiary' /> |
| | | <RiCloseLine className='w-4 h-4 text-text-tertiary' /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div className='max-h-[480px] overflow-y-auto px-4 py-2'> |
| | | <div className='px-4 py-2 max-h-[480px] overflow-y-auto'> |
| | | {/* name */} |
| | | <div className='mb-4'> |
| | | <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.chatVariable.modal.name')}</div> |
| | | <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.chatVariable.modal.name')}</div> |
| | | <div className='flex'> |
| | | <Input |
| | | placeholder={t('workflow.chatVariable.modal.namePlaceholder') || ''} |
| | |
| | | </div> |
| | | {/* type */} |
| | | <div className='mb-4'> |
| | | <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.chatVariable.modal.type')}</div> |
| | | <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.chatVariable.modal.type')}</div> |
| | | <div className='flex'> |
| | | <VariableTypeSelector |
| | | value={type} |
| | |
| | | </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 className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold'> |
| | | <div>{t('workflow.chatVariable.modal.value')}</div> |
| | | {(type === ChatVarType.ArrayString || type === ChatVarType.ArrayNumber) && ( |
| | | <Button |
| | |
| | | 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 ? <RiInputField className='mr-1 w-3.5 h-3.5' /> : <RiDraftLine className='mr-1 w-3.5 h-3.5' />} |
| | | {editInJSON ? t('workflow.chatVariable.modal.oneByOne') : t('workflow.chatVariable.modal.editInJSON')} |
| | | </Button> |
| | | )} |
| | |
| | | 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 ? <RiInputField className='mr-1 w-3.5 h-3.5' /> : <RiDraftLine className='mr-1 w-3.5 h-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} |
| | | <Input |
| | | placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''} |
| | | value={value} |
| | | onChange={e => setValue(e.target.value)} |
| | | /> |
| | | )} |
| | |
| | | /> |
| | | )} |
| | | {editInJSON && ( |
| | | <div className='w-full rounded-[10px] bg-components-input-bg-normal py-2 pl-3 pr-1' style={{ height: editorMinHeight }}> |
| | | <div className='w-full py-2 pl-3 pr-1 rounded-[10px] bg-components-input-bg-normal' style={{ height: editorMinHeight }}> |
| | | <CodeEditor |
| | | isExpand |
| | | noWrapper |
| | |
| | | </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> |
| | | <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.chatVariable.modal.description')}</div> |
| | | <div className='flex'> |
| | | <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' |
| | | className='block p-2 w-full h-20 rounded-lg bg-components-input-bg-normal border border-transparent system-sm-regular outline-none appearance-none caret-primary-600 resize-none hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder' |
| | | value={des} |
| | | placeholder={t('workflow.chatVariable.modal.descriptionPlaceholder') || ''} |
| | | onChange={e => setDes(e.target.value)} |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'> |
| | | <div className='p-4 pt-2 flex flex-row-reverse rounded-b-2xl'> |
| | | <div className='flex gap-2'> |
| | | <Button onClick={onClose}>{t('common.operation.cancel')}</Button> |
| | | <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button> |