| | |
| | | } |
| | | |
| | | const onClear = () => { |
| | | const newInputs: Inputs = {} |
| | | const newInputs: Record<string, any> = {} |
| | | promptVariables.forEach((item) => { |
| | | newInputs[item.key] = '' |
| | | }) |
| | |
| | | |
| | | return ( |
| | | <> |
| | | <div className='relative z-[1] mx-3 rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-md'> |
| | | <div className='relative z-[1] mx-3 border-[0.5px] bg-components-panel-on-panel-item-bg border-components-panel-border-subtle rounded-xl shadow-md'> |
| | | <div className={cn('px-4 pt-3', userInputFieldCollapse ? 'pb-3' : 'pb-1')}> |
| | | <div className='flex cursor-pointer items-center gap-0.5 py-0.5' onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}> |
| | | <div className='system-md-semibold-uppercase text-text-secondary'>{t('appDebug.inputs.userInputField')}</div> |
| | | {userInputFieldCollapse && <RiArrowRightSLine className='h-4 w-4 text-text-secondary'/>} |
| | | {!userInputFieldCollapse && <RiArrowDownSLine className='h-4 w-4 text-text-secondary'/>} |
| | | <div className='flex items-center gap-0.5 py-0.5 cursor-pointer' onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}> |
| | | <div className='text-text-secondary system-md-semibold-uppercase'>{t('appDebug.inputs.userInputField')}</div> |
| | | {userInputFieldCollapse && <RiArrowRightSLine className='w-4 h-4 text-text-secondary'/>} |
| | | {!userInputFieldCollapse && <RiArrowDownSLine className='w-4 h-4 text-text-secondary'/>} |
| | | </div> |
| | | {!userInputFieldCollapse && ( |
| | | <div className='system-xs-regular mt-1 text-text-tertiary'>{t('appDebug.inputs.completionVarTip')}</div> |
| | | <div className='mt-1 text-text-tertiary system-xs-regular'>{t('appDebug.inputs.completionVarTip')}</div> |
| | | )} |
| | | </div> |
| | | {!userInputFieldCollapse && promptVariables.length > 0 && ( |
| | | <div className='px-4 pb-4 pt-3'> |
| | | <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) }} |
| | |
| | | </div> |
| | | ))} |
| | | {visionConfig?.enabled && ( |
| | | <div className="mt-3 justify-between xl:flex"> |
| | | <div className="mr-1 w-[120px] shrink-0 py-2 text-sm text-text-primary">{t('common.imageUploader.imageUpload')}</div> |
| | | <div className="mt-3 xl:flex justify-between"> |
| | | <div className="mr-1 py-2 shrink-0 w-[120px] text-sm text-gray-900">{t('common.imageUploader.imageUpload')}</div> |
| | | <div className='grow'> |
| | | <TextGenerationImageUploader |
| | | settings={visionConfig} |
| | |
| | | </div> |
| | | )} |
| | | {!userInputFieldCollapse && ( |
| | | <div className='flex justify-between border-t border-divider-subtle p-4 pt-3'> |
| | | <div className='flex justify-between p-4 pt-3 border-t border-divider-subtle'> |
| | | <Button className='w-[72px]' onClick={onClear}>{t('common.operation.clear')}</Button> |
| | | {canNotRun && ( |
| | | <Tooltip popupContent={t('appDebug.otherError.promptNoBeEmpty')} needsDelay> |
| | |
| | | disabled={canNotRun} |
| | | onClick={() => onSend && onSend()} |
| | | className="w-[96px]"> |
| | | <RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" /> |
| | | <RiPlayLargeFill className="shrink-0 w-4 h-4 mr-0.5" aria-hidden="true" /> |
| | | {t('appDebug.inputs.run')} |
| | | </Button> |
| | | </Tooltip> |
| | |
| | | disabled={canNotRun} |
| | | onClick={() => onSend && onSend()} |
| | | className="w-[96px]"> |
| | | <RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" /> |
| | | <RiPlayLargeFill className="shrink-0 w-4 h-4 mr-0.5" aria-hidden="true" /> |
| | | {t('appDebug.inputs.run')} |
| | | </Button> |
| | | )} |