opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ui fixes in model selector

This commit is contained in:
Yi 2024-12-31 11:08:53 +08:00
parent a3f736f6e5
commit 232fb66edd
4 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
View File

@ -22,18 +22,18 @@ const ModelIcon: FC<ModelIconProps> = ({
}) => {
const language = useLanguage()
if (provider?.provider.includes('openai') && modelName?.includes('gpt-4o'))
return <OpenaiBlue className={cn('w-5 h-5', className)}/>
return <div className='flex w-6 h-6 items-center justify-center'><OpenaiBlue className={cn('w-5 h-5', className)}/></div>
if (provider?.provider.includes('openai') && modelName?.startsWith('gpt-4'))
return <OpenaiViolet className={cn('w-5 h-5', className)}/>
return <div className='flex w-6 h-6 items-center justify-center'><OpenaiViolet className={cn('w-5 h-5', className)}/></div>
if (provider?.icon_small) {
return (
<div className={isDeprecated ? 'opacity-50' : ''}>
<div className={`flex w-6 h-6 items-center justify-center ${isDeprecated ? 'opacity-50' : ''}`}>
<img
alt='model-icon'
src={`${provider.icon_small[language] || provider.icon_small.en_US}`}
className={cn('w-4 h-4', className)}
className={cn('w-5 h-5', className)}
/>
</div>
)
@ -41,10 +41,10 @@ const ModelIcon: FC<ModelIconProps> = ({
return (
<div className={cn(
'flex items-center justify-center w-5 h-5 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
'flex items-center justify-center w-6 h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
className,
)}>
<div className='flex w-3 h-3 items-center justify-center opacity-35'>
<div className='flex w-5 h5 items-center justify-center opacity-35'>
<Group className='text-text-tertiary' />
</div>
</div>

20
web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
View File

@ -22,19 +22,21 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
return (
<div
className={cn('group flex items-center p-1 gap-0.5 rounded-lg bg-components-input-bg-disabled cursor-pointer', className)}
className={cn('group flex flex-grow items-center p-[3px] pl-1 gap-1 rounded-lg bg-components-input-bg-disabled cursor-pointer', className)}
>
<ModelIcon
className='shrink-0 mr-1.5'
provider={currentProvider}
modelName={modelName}
/>
<div className='mr-1 system-sm-regular text-components-input-text-filled truncate'>
{modelName}
<div className='flex items-center py-[1px] gap-1 grow'>
<ModelIcon
className="m-0.5"
provider={currentProvider}
modelName={modelName}
/>
<div className='system-sm-regular text-components-input-text-filled truncate'>
{modelName}
</div>
</div>
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
<Tooltip popupContent={t('common.modelProvider.deprecated')}>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
<AlertTriangle className='w-4 h-4 text-text-warning-secondary' />
</Tooltip>
</div>
</div>

2
web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
View File

@ -34,7 +34,7 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
return (
<div
className={cn(
'group flex items-center px-2 h-8 rounded-lg bg-components-input-bg-normal',
'group flex items-center p-1 gap-0.5 h-8 rounded-lg bg-components-input-bg-normal',
!readonly && 'hover:bg-components-input-bg-hover cursor-pointer',
open && 'bg-components-input-bg-hover',
model.status !== ModelStatusEnum.active && 'bg-components-input-bg-disabled hover:bg-components-input-bg-disabled',

6
web/app/components/workflow/nodes/_base/components/setting-item.tsx
View File

@ -12,12 +12,12 @@ export type SettingItemProps = PropsWithChildren<{
export const SettingItem = ({ label, children, status, tooltip }: SettingItemProps) => {
const indicator: ComponentProps<typeof Indicator>['color'] = status === 'error' ? 'red' : status === 'warning' ? 'yellow' : undefined
const needTooltip = ['error', 'warning'].includes(status as any)
return <div className='flex items-center h-6 justify-between bg-workflow-block-parma-bg rounded-md px-1 space-x-1 text-xs font-normal relative'>
<div className={classNames('shrink-0 truncate text-xs font-medium text-text-tertiary uppercase', !!children && 'max-w-[100px]')}>
return <div className='flex items-center justify-between bg-workflow-block-parma-bg rounded-md py-1 px-1.5 space-x-1 text-xs font-normal relative'>
<div className={classNames('shrink-0 truncate text-text-tertiary system-xs-medium-uppercase', !!children && 'max-w-[100px]')}>
{label}
</div>
<Tooltip popupContent={tooltip} disabled={!needTooltip}>
<div className='truncate text-right text-xs font-normal text-text-secondary'>
<div className='truncate text-right system-xs-medium text-text-secondary'>
{children}
</div>
</Tooltip>