| | |
| | | |
| | | return ( |
| | | <div className='py-2'> |
| | | <div className='rounded-lg border border-components-panel-border bg-components-panel-bg'> |
| | | <div className='flex h-10 items-center justify-between rounded-lg px-3'> |
| | | <div className='shrink-0 text-sm font-medium text-text-primary'>{title}</div> |
| | | <div className='flex grow items-center justify-end'> |
| | | <div className='rounded-lg bg-gray-50 border border-gray-200'> |
| | | <div className='flex items-center justify-between px-3 h-10 rounded-lg'> |
| | | <div className='shrink-0 text-sm font-medium text-gray-900'>{title}</div> |
| | | <div className='grow flex items-center justify-end'> |
| | | { |
| | | info && ( |
| | | <div className='mr-2 truncate text-xs text-text-tertiary' title={info}>{info}</div> |
| | | <div className='mr-2 text-xs text-gray-500 truncate' title={info}>{info}</div> |
| | | ) |
| | | } |
| | | <Switch |
| | |
| | | </div> |
| | | { |
| | | config.enabled && showPreset && ( |
| | | <div className='rounded-lg bg-components-panel-bg px-3 pb-3 pt-1'> |
| | | <div className='flex h-8 items-center justify-between text-[13px] font-medium text-text-secondary'> |
| | | <div className='px-3 pt-1 pb-3 bg-white rounded-lg'> |
| | | <div className='flex items-center justify-between h-8 text-[13px] font-medium text-gray-700'> |
| | | {t('appDebug.feature.moderation.modal.content.preset')} |
| | | <span className='text-xs font-normal text-text-tertiary'>{t('appDebug.feature.moderation.modal.content.supportMarkdown')}</span> |
| | | <span className='text-xs font-normal text-gray-500'>{t('appDebug.feature.moderation.modal.content.supportMarkdown')}</span> |
| | | </div> |
| | | <div className='relative h-20 rounded-lg bg-components-input-bg-normal px-3 py-2'> |
| | | <div className='relative px-3 py-2 h-20 rounded-lg bg-gray-100'> |
| | | <textarea |
| | | value={config.preset_response || ''} |
| | | className='block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-none' |
| | | className='block w-full h-full bg-transparent text-sm outline-none appearance-none resize-none' |
| | | placeholder={t('appDebug.feature.moderation.modal.content.placeholder') || ''} |
| | | onChange={e => handleConfigChange('preset_response', e.target.value)} |
| | | /> |
| | | <div className='absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary'> |
| | | <span>{(config.preset_response || '').length}</span>/<span className='text-text-tertiary'>100</span> |
| | | <div className='absolute bottom-2 right-2 flex items-center px-1 h-5 rounded-md bg-gray-50 text-xs font-medium text-gray-300'> |
| | | <span>{(config.preset_response || '').length}</span>/<span className='text-gray-500'>100</span> |
| | | </div> |
| | | </div> |
| | | </div> |