youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 02:18:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

dark mode for model provider

Browse Source
This commit is contained in:
JzoNg
2024-12-18 15:18:56 +08:00
parent 5dad4793e6
commit 1fa5b1755f
22 changed files with 821 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,7 +35,6 @@ import {
useLanguage,
useProviderCredentialsAndLoadBalancing,
} from '../hooks'
import ProviderIcon from '../provider-icon'
import { useValidate } from '../../key-validator/hooks'
import { ValidatedStatus } from '../../key-validator/declarations'
import ModelLoadBalancingConfigs from '../provider-added-card/model-load-balancing-configs'
@ -282,9 +281,8 @@ const ModelModal: FC<ModelModalProps> = ({
<div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
<div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-components-panel-bg shadow-xl rounded-2xl overflow-y-auto'>
<div className='px-8 pt-8'>
<div className='flex justify-between items-center mb-2'>
<div className='flex items-center mb-2'>
<div className='text-xl font-semibold text-text-primary'>{renderTitlePrefix()}</div>
<ProviderIcon provider={provider} />
</div>
<Form

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

@ -63,7 +63,7 @@ const ModelName: FC<ModelNameProps> = ({
<FeatureIcon
key={feature}
feature={feature}
className={featuresClassName}
className={cn('ml-1', featuresClassName)}
/>
))
}

0
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/stop-sequence.tsx
View File

14
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
View File

@ -46,8 +46,8 @@ const Trigger: FC<TriggerProps> = ({
className={cn(
'relative flex items-center px-2 h-8 rounded-lg cursor-pointer',
!isInWorkflow && 'border hover:border-[1.5px]',
!isInWorkflow && (disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'),
isInWorkflow && 'pr-[30px] bg-gray-100 border border-gray-100 hover:border-gray-200',
!isInWorkflow && (disabled ? 'border-[#F79009] bg-components-input-bg-disabled' : 'border-[#444CE7] bg-components-input-bg-normal'),
isInWorkflow && 'pr-[30px] bg-components-input-bg-normal border border-components-input-border-hover hover:border-components-input-border-hover',
)}
>
{
@ -71,18 +71,16 @@ const Trigger: FC<TriggerProps> = ({
{
currentModel && (
<ModelName
className='mr-1.5 text-gray-900'
className='mr-1.5 text-text-primary'
modelItem={currentModel}
showMode
modeClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
showFeatures
featuresClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
/>
)
}
{
!currentModel && (
<div className='mr-1 text-[13px] font-medium text-gray-900 truncate'>
<div className='mr-1 text-[13px] font-medium text-text-primary truncate'>
{modelId}
</div>
)
@ -103,10 +101,10 @@ const Trigger: FC<TriggerProps> = ({
</Tooltip>
)
: (
<SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-gray-500', 'shrink-0 w-4 h-4')} />
<SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-text-tertiary', 'shrink-0 w-4 h-4')} />
)
}
{isInWorkflow && (<RiArrowDownSLine className='absolute top-[9px] right-2 w-3.5 h-3.5 text-gray-500' />)}
{isInWorkflow && (<RiArrowDownSLine className='absolute top-[9px] right-2 w-3.5 h-3.5 text-text-tertiary' />)}
</div>
)
}

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

@ -4,6 +4,7 @@ import ModelIcon from '../model-icon'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import { useProviderContext } from '@/context/provider-context'
import Tooltip from '@/app/components/base/tooltip'
import cn from '@/utils/classnames'
type ModelTriggerProps = {
modelName: string
@ -21,17 +22,14 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
return (
<div
className={`
group flex items-center px-2 h-8 rounded-lg bg-[#FFFAEB] cursor-pointer
${className}
`}
className={cn('group flex items-center px-2 h-8 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 text-[13px] font-medium text-gray-800 truncate'>
<div className='mr-1 text-[13px] font-medium text-text-secondary truncate'>
{modelName}
</div>
<div className='shrink-0 flex items-center justify-center w-4 h-4'>

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

@ -1,6 +1,7 @@
import type { FC } from 'react'
import { RiArrowDownSLine } from '@remixicon/react'
import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
import cn from '@/utils/classnames'
type ModelTriggerProps = {
open: boolean
@ -12,25 +13,24 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
}) => {
return (
<div
className={`
flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
${className}
${open && '!bg-gray-200'}
`}
className={cn(
'flex items-center px-2 h-8 rounded-lg bg-components-input-bg-normal hover:bg-components-input-bg-hover cursor-pointer', open && 'bg-components-input-bg-hover',
className,
)}
>
<div className='grow flex items-center'>
<div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border border-dashed border-black/5'>
<CubeOutline className='w-3 h-3 text-gray-400' />
<div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border border-dashed border-divider-regular'>
<CubeOutline className='w-3 h-3 text-text-quaternary' />
</div>
<div
className='text-[13px] text-gray-500 truncate'
className='text-[13px] text-text-tertiary truncate'
title='Select model'
>
Select model
</div>
</div>
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
<RiArrowDownSLine className='w-3.5 h-3.5 text-gray-500' />
<RiArrowDownSLine className='w-3.5 h-3.5 text-text-tertiary' />
</div>
</div>
)

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

@ -65,7 +65,7 @@ const FeatureIcon: FC<FeatureIconProps> = ({
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.vision })}
>
<div className='inline-block cursor-help'>
<ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
<ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
<MagicEyes className='w-3 h-3' />
</ModelBadge>
</div>

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

@ -13,6 +13,7 @@ import ModelIcon from '../model-icon'
import ModelName from '../model-name'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import Tooltip from '@/app/components/base/tooltip'
import cn from '@/utils/classnames'
type ModelTriggerProps = {
open: boolean
@ -32,13 +33,13 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
return (
<div
className={`
group flex items-center px-2 h-8 rounded-lg bg-gray-100
${!readonly && 'hover:bg-gray-200 cursor-pointer'}
${className}
${open && '!bg-gray-200'}
${model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
`}
className={cn(
'group flex items-center px-2 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',
className,
)}
>
<ModelIcon
className='shrink-0 mr-1.5'
@ -62,7 +63,7 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
)
: (
<RiArrowDownSLine
className='w-3.5 h-3.5 text-gray-500'
className='w-3.5 h-3.5 text-text-tertiary'
/>
)
}

10
web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
View File

@ -64,7 +64,7 @@ const PopupItem: FC<PopupItemProps> = ({
return (
<div className='mb-1'>
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
{model.label[language] || model.label.en_US}
</div>
{
@ -78,7 +78,7 @@ const PopupItem: FC<PopupItemProps> = ({
key={modelItem.model}
className={`
group relative flex items-center px-3 py-1.5 h-8 rounded-lg
${modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-gray-50' : 'cursor-not-allowed hover:bg-gray-50/60'}
${modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-state-base-hover' : 'cursor-not-allowed hover:bg-state-base-hover-alt'}
`}
onClick={() => handleSelect(model.provider, modelItem)}
>
@ -92,7 +92,7 @@ const PopupItem: FC<PopupItemProps> = ({
/>
<ModelName
className={`
grow text-sm font-normal text-gray-900
grow text-sm font-normal text-text-primary
${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
`}
modelItem={modelItem}
@ -101,13 +101,13 @@ const PopupItem: FC<PopupItemProps> = ({
/>
{
defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
<Check className='shrink-0 w-4 h-4 text-primary-600' />
<Check className='shrink-0 w-4 h-4 text-text-accent' />
)
}
{
modelItem.status === ModelStatusEnum.noConfigure && (
<div
className='hidden group-hover:block text-xs font-medium text-primary-600 cursor-pointer'
className='hidden group-hover:block text-xs font-medium text-text-accent cursor-pointer'
onClick={handleOpenModelModal}
>
{t('common.operation.add').toLocaleUpperCase()}

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

@ -39,20 +39,20 @@ const Popup: FC<PopupProps> = ({
}).filter(model => model.models.length > 0)
return (
<div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg overflow-y-auto'>
<div className='sticky top-0 pl-3 pt-3 pr-2 pb-1 bg-white z-10'>
<div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg overflow-y-auto'>
<div className='sticky top-0 pl-3 pt-3 pr-2 pb-1 bg-components-panel-bg z-10'>
<div className={`
flex items-center pl-[9px] pr-[10px] h-8 rounded-lg border
${searchText ? 'bg-white border-gray-300 shadow-xs' : 'bg-gray-100 border-transparent'}
${searchText ? 'bg-components-input-bg-active border-components-input-border-active shadow-xs' : 'bg-components-input-bg-normal border-transparent'}
`}>
<RiSearchLine
className={`
shrink-0 mr-[7px] w-[14px] h-[14px]
${searchText ? 'text-gray-500' : 'text-gray-400'}
${searchText ? 'text-text-tertiary' : 'text-text-quaternary'}
`}
/>
<input
className='block grow h-[18px] text-[13px] appearance-none outline-none bg-transparent'
className='block grow h-[18px] text-[13px] text-text-primary appearance-none outline-none bg-transparent'
placeholder='Search model'
value={searchText}
onChange={e => setSearchText(e.target.value)}
@ -60,7 +60,7 @@ const Popup: FC<PopupProps> = ({
{
searchText && (
<XCircle
className='shrink-0 ml-1.5 w-[14px] h-[14px] text-gray-400 cursor-pointer'
className='shrink-0 ml-1.5 w-[14px] h-[14px] text-text-quaternary cursor-pointer'
onClick={() => setSearchText('')}
/>
)
@ -80,7 +80,7 @@ const Popup: FC<PopupProps> = ({
}
{
!filteredModelList.length && (
<div className='px-3 py-1.5 leading-[18px] text-center text-xs text-gray-500 break-all'>
<div className='px-3 py-1.5 leading-[18px] text-center text-xs text-text-tertiary break-all'>
{`No model found for “${searchText}”`}
</div>
)

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

@ -1,27 +0,0 @@
import {
RiExternalLinkLine,
} from '@remixicon/react'
import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
const ModelTrigger = () => {
return (
<div className='flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer'>
<div className='grow flex items-center'>
<div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border-dashed border-black/5'>
<CubeOutline className='w-[11px] h-[11px] text-gray-400' />
</div>
<div
className='text-[13px] text-gray-500 truncate'
title='Select model'
>
Please setup the Rerank model
</div>
</div>
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
<RiExternalLinkLine className='w-3.5 h-3.5 text-gray-500' />
</div>
</div>
)
}
export default ModelTrigger

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

@ -1,6 +1,8 @@
import type { FC } from 'react'
import type { ModelProvider } from '../declarations'
import { useLanguage } from '../hooks'
import { AnthropicText, Openai } from '@/app/components/base/icons/src/vender/other'
import cn from '@/utils/classnames'
type ProviderIconProps = {
provider: ModelProvider
@ -12,19 +14,30 @@ const ProviderIcon: FC<ProviderIconProps> = ({
}) => {
const language = useLanguage()
if (provider.icon_large) {
if (provider.provider === 'langgenius/anthropic/anthropic') {
return (
<img
alt='provider-icon'
src={`${provider.icon_large[language] || provider.icon_large.en_US}`}
className={`w-auto h-6 ${className}`}
/>
<div className='mb-2'>
<AnthropicText className='w-auto h-6 text-text-inverted-dimmed' />
</div>
)
}
if (provider.provider === 'langgenius/openai/openai') {
return (
<div className='mb-2'>
<Openai className='w-auto h-6 text-text-inverted-dimmed' />
</div>
)
}
return (
<div className={`inline-flex items-center ${className}`}>
<div className='text-xs font-semibold text-black'>
<div className={cn('inline-flex items-center gap-2', className)}>
<img
alt='provider-icon'
src={`${provider.icon_small[language] || provider.icon_small.en_US}`}
className='w-6 h-6'
/>
<div className='system-md-semibold text-text-primary'>
{provider.label[language] || provider.label.en_US}
</div>
</div>

22
web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
View File

@ -140,13 +140,13 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-50'>
<div className='pt-4 w-[360px] rounded-xl border-[0.5px] border-black/5 bg-white shadow-xl'>
<div className='pt-4 w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'>
<div className='px-6 py-1'>
<div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
<div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
{t('common.modelProvider.systemReasoningModel.key')}
<Tooltip
popupContent={
<div className='w-[261px] text-gray-500'>
<div className='w-[261px] text-text-tertiary'>
{t('common.modelProvider.systemReasoningModel.tip')}
</div>
}
@ -162,11 +162,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
</div>
</div>
<div className='px-6 py-1'>
<div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
<div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
{t('common.modelProvider.embeddingModel.key')}
<Tooltip
popupContent={
<div className='w-[261px] text-gray-500'>
<div className='w-[261px] text-text-tertiary'>
{t('common.modelProvider.embeddingModel.tip')}
</div>
}
@ -182,11 +182,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
</div>
</div>
<div className='px-6 py-1'>
<div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
<div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
{t('common.modelProvider.rerankModel.key')}
<Tooltip
popupContent={
<div className='w-[261px] text-gray-500'>
<div className='w-[261px] text-text-tertiary'>
{t('common.modelProvider.rerankModel.tip')}
</div>
}
@ -202,11 +202,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
</div>
</div>
<div className='px-6 py-1'>
<div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
<div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
{t('common.modelProvider.speechToTextModel.key')}
<Tooltip
popupContent={
<div className='w-[261px] text-gray-500'>
<div className='w-[261px] text-text-tertiary'>
{t('common.modelProvider.speechToTextModel.tip')}
</div>
}
@ -222,11 +222,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
</div>
</div>
<div className='px-6 py-1'>
<div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
<div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
{t('common.modelProvider.ttsModel.key')}
<Tooltip
popupContent={
<div className='w-[261px] text-gray-500'>
<div className='w-[261px] text-text-tertiary'>
{t('common.modelProvider.ttsModel.tip')}
</div>
}