| | |
| | | } from '@/models/common' |
| | | import { useToastContext } from '@/app/components/base/toast' |
| | | import AppIcon from '@/app/components/base/app-icon' |
| | | import { noop } from 'lodash-es' |
| | | |
| | | const systemTypes = ['api'] |
| | | type ExternalDataToolModalProps = { |
| | |
| | | return |
| | | } |
| | | |
| | | if (localeData.variable && !/[a-zA-Z_]\w{0,29}/g.test(localeData.variable)) { |
| | | if (localeData.variable && !/[a-zA-Z_][a-zA-Z0-9_]{0,29}/g.test(localeData.variable)) { |
| | | notify({ type: 'error', message: t('appDebug.varKeyError.notValid', { key: t('appDebug.feature.tools.modal.variableName.title') }) }) |
| | | return |
| | | } |
| | |
| | | return ( |
| | | <Modal |
| | | isShow |
| | | onClose={noop} |
| | | className='!w-[640px] !max-w-none !p-8 !pb-6' |
| | | onClose={() => { }} |
| | | className='!p-8 !pb-6 !max-w-none !w-[640px]' |
| | | > |
| | | <div className='mb-2 text-xl font-semibold text-gray-900'> |
| | | {`${action} ${t('appDebug.variableConfig.apiBasedVar')}`} |
| | | </div> |
| | | <div className='py-2'> |
| | | <div className='text-sm font-medium leading-9 text-gray-900'> |
| | | <div className='leading-9 text-sm font-medium text-gray-900'> |
| | | {t('common.apiBasedExtension.type')} |
| | | </div> |
| | | <SimpleSelect |
| | |
| | | /> |
| | | </div> |
| | | <div className='py-2'> |
| | | <div className='text-sm font-medium leading-9 text-gray-900'> |
| | | <div className='leading-9 text-sm font-medium text-gray-900'> |
| | | {t('appDebug.feature.tools.modal.name.title')} |
| | | </div> |
| | | <div className='flex items-center'> |
| | | <input |
| | | value={localeData.label || ''} |
| | | onChange={e => handleValueChange({ label: e.target.value })} |
| | | className='mr-2 block h-9 grow appearance-none rounded-lg bg-gray-100 px-3 text-sm text-gray-900 outline-none' |
| | | className='grow block mr-2 px-3 h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none' |
| | | placeholder={t('appDebug.feature.tools.modal.name.placeholder') || ''} |
| | | /> |
| | | <AppIcon size='large' |
| | | onClick={() => { setShowEmojiPicker(true) }} |
| | | className='!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-black/5 ' |
| | | className='!w-9 !h-9 rounded-lg border-[0.5px] border-black/5 cursor-pointer ' |
| | | icon={localeData.icon} |
| | | background={localeData.icon_background} |
| | | /> |
| | | </div> |
| | | </div> |
| | | <div className='py-2'> |
| | | <div className='text-sm font-medium leading-9 text-gray-900'> |
| | | <div className='leading-9 text-sm font-medium text-gray-900'> |
| | | {t('appDebug.feature.tools.modal.variableName.title')} |
| | | </div> |
| | | <input |
| | | value={localeData.variable || ''} |
| | | onChange={e => handleValueChange({ variable: e.target.value })} |
| | | className='block h-9 w-full appearance-none rounded-lg bg-gray-100 px-3 text-sm text-gray-900 outline-none' |
| | | className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none' |
| | | placeholder={t('appDebug.feature.tools.modal.variableName.placeholder') || ''} |
| | | /> |
| | | </div> |
| | | { |
| | | localeData.type === 'api' && ( |
| | | <div className='py-2'> |
| | | <div className='flex h-9 items-center justify-between text-sm font-medium text-gray-900'> |
| | | <div className='flex justify-between items-center h-9 text-sm font-medium text-gray-900'> |
| | | {t('common.apiBasedExtension.selector.title')} |
| | | <a |
| | | href={t('common.apiBasedExtension.linkUrl') || '/'} |
| | | target='_blank' rel='noopener noreferrer' |
| | | className='group flex items-center text-xs font-normal text-gray-500 hover:text-primary-600' |
| | | > |
| | | <BookOpen01 className='mr-1 h-3 w-3 text-gray-500 group-hover:text-primary-600' /> |
| | | <BookOpen01 className='mr-1 w-3 h-3 text-gray-500 group-hover:text-primary-600' /> |
| | | {t('common.apiBasedExtension.link')} |
| | | </a> |
| | | </div> |
| | |
| | | /> |
| | | ) |
| | | } |
| | | <div className='mt-6 flex items-center justify-end'> |
| | | <div className='flex items-center justify-end mt-6'> |
| | | <Button |
| | | onClick={onCancel} |
| | | className='mr-2' |