| | |
|---|
| | | return null |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <div className={cn('z-[1] rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs')}> |
|---|
| | | <div className='px-4 pb-4 pt-3'> |
|---|
| | | <div className={cn('bg-components-panel-on-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs z-[1]')}> |
|---|
| | | <div className='px-4 pt-3 pb-4'> |
|---|
| | | {promptVariables.map(({ key, name, type, options, max_length, required }, index) => ( |
|---|
| | | <div |
|---|
| | | key={key} |
|---|
| | | className='mb-4 last-of-type:mb-0' |
|---|
| | | > |
|---|
| | | <div> |
|---|
| | | <div className='system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary'> |
|---|
| | | <div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'> |
|---|
| | | <div className='truncate'>{name || key}</div> |
|---|
| | | {!required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>} |
|---|
| | | {!required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>} |
|---|
| | | </div> |
|---|
| | | <div className='grow'> |
|---|
| | | {type === 'string' && ( |
|---|
| | |
|---|
| | | )} |
|---|
| | | {type === 'paragraph' && ( |
|---|
| | | <Textarea |
|---|
| | | className='h-[120px] grow' |
|---|
| | | className='grow h-[120px]' |
|---|
| | | placeholder={name} |
|---|
| | | value={inputs[key] ? `${inputs[key]}` : ''} |
|---|
| | | onChange={(e) => { handleInputValueChange(key, e.target.value) }} |
|---|
| | |
|---|
| | | onSelect={(i) => { handleInputValueChange(key, i.value as string) }} |
|---|
| | | items={(options || []).map(i => ({ name: i, value: i }))} |
|---|
| | | allowSearch={false} |
|---|
| | | bgClassName='bg-gray-50' |
|---|
| | | /> |
|---|
| | | )} |
|---|
| | | {type === 'number' && ( |
|---|
