| | |
| | | <Modal |
| | | isShow={Boolean(model) && open} |
| | | onClose={onClose} |
| | | className='w-[640px] max-w-none px-8 pt-8' |
| | | className='max-w-none pt-8 px-8 w-[640px]' |
| | | title={ |
| | | <div className='pb-3 font-semibold'> |
| | | <div className='h-[30px]'>{t('common.modelProvider.configLoadBalancing')}</div> |
| | | {Boolean(model) && ( |
| | | <div className='flex h-5 items-center'> |
| | | <div className='flex items-center h-5'> |
| | | <ModelIcon |
| | | className='mr-2 shrink-0' |
| | | className='shrink-0 mr-2' |
| | | provider={provider} |
| | | modelName={model!.model} |
| | | /> |
| | | <ModelName |
| | | className='system-md-regular grow text-text-secondary' |
| | | className='grow text-sm font-normal text-gray-900' |
| | | modelItem={model!} |
| | | showModelType |
| | | showMode |
| | |
| | | <div className='py-2'> |
| | | <div |
| | | className={classNames( |
| | | 'min-h-16 bg-components-panel-bg border rounded-xl transition-colors', |
| | | draftConfig.enabled ? 'border-components-panel-border cursor-pointer' : 'border-util-colors-blue-blue-600 cursor-default', |
| | | 'min-h-16 bg-gray-50 border rounded-xl transition-colors', |
| | | draftConfig.enabled ? 'border-gray-200 cursor-pointer' : 'border-primary-400 cursor-default', |
| | | )} |
| | | onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined} |
| | | > |
| | | <div className='flex select-none items-center gap-2 px-[15px] py-3'> |
| | | <div className='flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-components-card-border bg-components-card-bg'> |
| | | <div className='flex items-center px-[15px] py-3 gap-2 select-none'> |
| | | <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 bg-white border rounded-lg'> |
| | | {Boolean(model) && ( |
| | | <ModelIcon className='shrink-0' provider={provider} modelName={model!.model} /> |
| | | )} |
| | | </div> |
| | | <div className='grow'> |
| | | <div className='text-sm text-text-secondary'>{t('common.modelProvider.providerManaged')}</div> |
| | | <div className='text-xs text-text-tertiary'>{t('common.modelProvider.providerManagedDescription')}</div> |
| | | <div className='text-sm'>{t('common.modelProvider.providerManaged')}</div> |
| | | <div className='text-xs text-gray-500'>{t('common.modelProvider.providerManagedDescription')}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | }} /> |
| | | </div> |
| | | |
| | | <div className='mt-6 flex items-center justify-end gap-2'> |
| | | <div className='flex items-center justify-end gap-2 mt-6'> |
| | | <Button onClick={onClose}>{t('common.operation.cancel')}</Button> |
| | | <Button |
| | | variant='primary' |