| | |
| | | <> |
| | | <div |
| | | className={classNames( |
| | | 'min-h-16 bg-components-panel-bg border rounded-xl transition-colors', |
| | | (withSwitch || !draftConfig.enabled) ? 'border-components-panel-border' : 'border-util-colors-blue-blue-600', |
| | | 'min-h-16 bg-gray-50 border rounded-xl transition-colors', |
| | | (withSwitch || !draftConfig.enabled) ? 'border-gray-200' : 'border-primary-400', |
| | | (withSwitch || draftConfig.enabled) ? 'cursor-default' : 'cursor-pointer', |
| | | className, |
| | | )} |
| | | onClick={(!withSwitch && !draftConfig.enabled) ? () => toggleModalBalancing(true) : 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-util-colors-indigo-indigo-100 bg-util-colors-indigo-indigo-50 text-util-colors-blue-blue-600'> |
| | | <Balance className='h-4 w-4' /> |
| | | <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 text-primary-600 bg-indigo-50 border border-indigo-100 rounded-lg'> |
| | | <Balance className='w-4 h-4' /> |
| | | </div> |
| | | <div className='grow'> |
| | | <div className='flex items-center gap-1 text-sm text-text-primary'> |
| | | <div className='flex items-center gap-1 text-sm'> |
| | | {t('common.modelProvider.loadBalancing')} |
| | | <Tooltip |
| | | popupContent={t('common.modelProvider.loadBalancingInfo')} |
| | |
| | | triggerClassName='w-3 h-3' |
| | | /> |
| | | </div> |
| | | <div className='text-xs text-text-tertiary'>{t('common.modelProvider.loadBalancingDescription')}</div> |
| | | <div className='text-xs text-gray-500'>{t('common.modelProvider.loadBalancingDescription')}</div> |
| | | </div> |
| | | { |
| | | withSwitch && ( |
| | |
| | | {draftConfig.configs.map((config, index) => { |
| | | const isProviderManaged = config.name === '__inherit__' |
| | | return ( |
| | | <div key={config.id || index} className='group flex h-10 items-center rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg px-3 shadow-xs'> |
| | | <div className='flex grow items-center'> |
| | | <div className='mr-2 flex h-3 w-3 items-center justify-center'> |
| | | <div key={config.id || index} className='group flex items-center px-3 h-10 bg-white border border-gray-200 rounded-lg shadow-xs'> |
| | | <div className='grow flex items-center'> |
| | | <div className='flex items-center justify-center mr-2 w-3 h-3'> |
| | | {(config.in_cooldown && Boolean(config.ttl)) |
| | | ? ( |
| | | <CooldownTimer secondsRemaining={config.ttl} onFinish={() => clearCountdown(index)} /> |
| | |
| | | </Tooltip> |
| | | )} |
| | | </div> |
| | | <div className='mr-1 text-[13px]'> |
| | | <div className='text-[13px] mr-1'> |
| | | {isProviderManaged ? t('common.modelProvider.defaultConfig') : config.name} |
| | | </div> |
| | | {isProviderManaged && ( |
| | | <span className='rounded-[5px] border border-divider-regular px-1 text-2xs uppercase text-text-tertiary'>{t('common.modelProvider.providerManaged')}</span> |
| | | <span className='px-1 text-2xs uppercase text-gray-500 border border-black/8 rounded-[5px]'>{t('common.modelProvider.providerManaged')}</span> |
| | | )} |
| | | </div> |
| | | <div className='flex items-center gap-1'> |
| | |
| | | <> |
| | | <div className='flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'> |
| | | <span |
| | | className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-components-button-secondary-bg text-text-tertiary transition-colors hover:bg-components-button-secondary-bg-hover' |
| | | className='flex items-center justify-center w-8 h-8 text-gray-500 bg-white rounded-lg transition-colors cursor-pointer hover:bg-black/5' |
| | | onClick={() => toggleEntryModal(index, config)} |
| | | > |
| | | <Edit02 className='h-4 w-4' /> |
| | | <Edit02 className='w-4 h-4' /> |
| | | </span> |
| | | <span |
| | | className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-components-button-secondary-bg text-text-tertiary transition-colors hover:bg-components-button-secondary-bg-hover' |
| | | className='flex items-center justify-center w-8 h-8 text-gray-500 bg-white rounded-lg transition-colors cursor-pointer hover:bg-black/5' |
| | | onClick={() => updateConfigEntry(index, () => undefined)} |
| | | > |
| | | <RiDeleteBinLine className='h-4 w-4' /> |
| | | <RiDeleteBinLine className='w-4 h-4' /> |
| | | </span> |
| | | <span className='mr-2 h-3 border-r border-r-divider-subtle' /> |
| | | <span className='mr-2 h-3 border-r border-r-gray-100' /> |
| | | </div> |
| | | </> |
| | | )} |
| | |
| | | })} |
| | | |
| | | <div |
| | | className='mt-1 flex h-8 items-center px-3 text-[13px] font-medium text-primary-600' |
| | | className='flex items-center px-3 mt-1 h-8 text-[13px] font-medium text-primary-600' |
| | | onClick={() => toggleEntryModal()} |
| | | > |
| | | <div className='flex cursor-pointer items-center'> |
| | | <Plus02 className='mr-2 h-3 w-3' />{t('common.modelProvider.addConfig')} |
| | | <div className='flex items-center cursor-pointer'> |
| | | <Plus02 className='mr-2 w-3 h-3' />{t('common.modelProvider.addConfig')} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | )} |
| | | { |
| | | draftConfig.enabled && draftConfig.configs.length < 2 && ( |
| | | <div className='flex h-[34px] items-center border-t border-t-divider-subtle bg-components-panel-bg px-6 text-xs text-text-secondary'> |
| | | <AlertTriangle className='mr-1 h-3 w-3 text-[#f79009]' /> |
| | | <div className='flex items-center px-6 h-[34px] text-xs text-gray-700 bg-black/2 border-t border-t-black/5'> |
| | | <AlertTriangle className='mr-1 w-3 h-3 text-[#f79009]' /> |
| | | {t('common.modelProvider.loadBalancingLeastKeyWarning')} |
| | | </div> |
| | | ) |
| | |
| | | |
| | | {!modelLoadBalancingEnabled && !IS_CE_EDITION && ( |
| | | <GridMask canvasClassName='!rounded-xl'> |
| | | <div className='mt-2 flex h-14 items-center justify-between rounded-xl border-[0.5px] border-components-panel-border px-4 shadow-md'> |
| | | <div className='flex items-center justify-between mt-2 px-4 h-14 border-[0.5px] border-gray-200 rounded-xl shadow-md'> |
| | | <div |
| | | className={classNames('text-sm font-semibold leading-tight text-gradient', s.textGradient)} |
| | | > |