mirror of
https://github.com/langgenius/dify.git
synced 2024-11-16 11:42:29 +08:00
update style of model & parameter selector
This commit is contained in:
JzoNg
parent
5efcdd6fa7
commit
75a037bc2a
|
|
@ -19,11 +19,12 @@ const ModelIcon: FC<ModelIconProps> = ({
|
|||
}) => {
|
||||
const language = useLanguage()
|
||||
|
||||
if (provider?.provider === 'openai' && (modelName?.startsWith('gpt-4') || modelName?.includes('4o')))
|
||||
if (provider?.provider.includes('openai') && (modelName?.startsWith('gpt-4') || modelName?.includes('4o')))
|
||||
return <OpenaiViolet className={`w-4 h-4 ${className}`}/>
|
||||
|
||||
if (provider?.icon_small) {
|
||||
return (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
alt='model-icon'
|
||||
src={`${provider.icon_small[language] || provider.icon_small.en_US}`}
|
||||
|
|
|
|||
|
|
@ -190,26 +190,22 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
|
|||
)
|
||||
}
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className={cn(portalToFollowElemContentClassName, 'z-[60]')}>
|
||||
<div className={cn(popupClassName, 'w-[496px] rounded-xl border border-gray-100 bg-white shadow-xl')}>
|
||||
<div className={cn(
|
||||
'max-h-[480px] overflow-y-auto',
|
||||
!isInWorkflow && 'px-10 pt-6 pb-8',
|
||||
isInWorkflow && 'p-4')}>
|
||||
<div className='flex items-center justify-between h-8'>
|
||||
<div className={cn('font-semibold text-gray-900 shrink-0', isInWorkflow && 'text-[13px]')}>
|
||||
<PortalToFollowElemContent className={cn('z-[60]', portalToFollowElemContentClassName)}>
|
||||
<div className={cn(popupClassName, 'w-[389px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg')}>
|
||||
<div className={cn('max-h-[420px] p-4 pt-3 overflow-y-auto')}>
|
||||
<div className='relative'>
|
||||
<div className={cn('mb-1 h-6 flex items-center text-text-secondary system-sm-semibold')}>
|
||||
{t('common.modelProvider.model').toLocaleUpperCase()}
|
||||
</div>
|
||||
<ModelSelector
|
||||
defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
|
||||
modelList={activeTextGenerationModelList}
|
||||
onSelect={handleChangeModel}
|
||||
triggerClassName='max-w-[295px]'
|
||||
/>
|
||||
</div>
|
||||
{
|
||||
!!parameterRules.length && (
|
||||
<div className='my-5 h-[1px] bg-gray-100' />
|
||||
<div className='my-3 h-[1px] bg-divider-subtle' />
|
||||
)
|
||||
}
|
||||
{
|
||||
|
|
@ -219,8 +215,8 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
|
|||
}
|
||||
{
|
||||
!isLoading && !!parameterRules.length && (
|
||||
<div className='flex items-center justify-between mb-4'>
|
||||
<div className={cn('font-semibold text-gray-900', isInWorkflow && 'text-[13px]')}>{t('common.modelProvider.parameters')}</div>
|
||||
<div className='flex items-center justify-between mb-2'>
|
||||
<div className={cn('h-6 flex items-center text-text-secondary system-sm-semibold')}>{t('common.modelProvider.parameters')}</div>
|
||||
{
|
||||
PROVIDER_WITH_PRESET_TONE.includes(provider) && (
|
||||
<PresetsParameter onSelect={handleSelectPresetParameter} />
|
||||
|
|
@ -237,7 +233,6 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
|
|||
].map(parameter => (
|
||||
<ParameterItem
|
||||
key={`${modelId}-${parameter.name}`}
|
||||
className='mb-4'
|
||||
parameterRule={parameter}
|
||||
value={completionParams?.[parameter.name]}
|
||||
onChange={v => handleParamChange(parameter.name, v)}
|
||||
|
|
@ -250,7 +245,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
|
|||
</div>
|
||||
{!hideDebugWithMultipleModel && (
|
||||
<div
|
||||
className='flex items-center justify-between px-6 h-[50px] bg-gray-50 border-t border-t-gray-100 text-xs font-medium text-primary-600 cursor-pointer rounded-b-xl'
|
||||
className='flex items-center justify-between px-4 h-[50px] bg-components-section-burn border-t border-t-divider-subtle system-sm-regular text-text-accent cursor-pointer rounded-b-xl'
|
||||
onClick={() => onDebugWithMultipleModelChange?.()}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ type ParameterItemProps = {
|
|||
parameterRule: ModelParameterRule
|
||||
value?: ParameterValue
|
||||
onChange?: (value: ParameterValue) => void
|
||||
className?: string
|
||||
onSwitch?: (checked: boolean, assignValue: ParameterValue) => void
|
||||
isInWorkflow?: boolean
|
||||
}
|
||||
|
|
@ -25,7 +24,6 @@ const ParameterItem: FC<ParameterItemProps> = ({
|
|||
parameterRule,
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
onSwitch,
|
||||
isInWorkflow,
|
||||
}) => {
|
||||
|
|
@ -249,9 +247,20 @@ const ParameterItem: FC<ParameterItemProps> = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={`flex items-center justify-between ${className}`}>
|
||||
<div>
|
||||
<div className={cn(isInWorkflow ? 'w-[140px]' : 'w-full', 'ml-4 shrink-0 flex items-center')}>
|
||||
<div className='flex items-center justify-between mb-2'>
|
||||
<div className='shrink-0 basis-1/2'>
|
||||
<div className={cn('shrink-0 w-full flex items-center')}>
|
||||
{
|
||||
!parameterRule.required && parameterRule.name !== 'stop' && (
|
||||
<div className='mr-2 w-7'>
|
||||
<Switch
|
||||
defaultValue={!isNullOrUndefined(value)}
|
||||
onChange={handleSwitch}
|
||||
size='md'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div
|
||||
className='mr-0.5 text-[13px] font-medium text-gray-700 truncate'
|
||||
title={parameterRule.label[language] || parameterRule.label.en_US}
|
||||
|
|
@ -269,16 +278,6 @@ const ParameterItem: FC<ParameterItemProps> = ({
|
|||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!parameterRule.required && parameterRule.name !== 'stop' && (
|
||||
<Switch
|
||||
className='mr-1'
|
||||
defaultValue={!isNullOrUndefined(value)}
|
||||
onChange={handleSwitch}
|
||||
size='md'
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
parameterRule.type === 'tag' && (
|
||||
|
|
|
|||
|
|
@ -2,12 +2,13 @@ import type { FC } from 'react'
|
|||
import { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiArrowDownSLine } from '@remixicon/react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Dropdown from '@/app/components/base/dropdown'
|
||||
import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
|
||||
import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
|
||||
import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce'
|
||||
import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
|
||||
import { TONE_LIST } from '@/config'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type PresetsParameterProps = {
|
||||
onSelect: (toneId: number) => void
|
||||
|
|
@ -18,19 +19,16 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
|
|||
const { t } = useTranslation()
|
||||
const renderTrigger = useCallback((open: boolean) => {
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
flex items-center px-[7px] h-7 rounded-md border-[0.5px] border-gray-200 shadow-xs
|
||||
text-xs font-medium text-gray-700 cursor-pointer
|
||||
${open && 'bg-gray-100'}
|
||||
`}
|
||||
<Button
|
||||
size={'small'}
|
||||
variant={'secondary'}
|
||||
className={cn(open && 'bg-state-base-hover')}
|
||||
>
|
||||
<SlidersH className='mr-[5px] w-3.5 h-3.5 text-gray-500' />
|
||||
{t('common.modelProvider.loadPresets')}
|
||||
<RiArrowDownSLine className='ml-0.5 w-3.5 h-3.5 text-gray-500' />
|
||||
</div>
|
||||
<RiArrowDownSLine className='ml-0.5 w-3.5 h-3.5' />
|
||||
</Button>
|
||||
)
|
||||
}, [])
|
||||
}, [t])
|
||||
const getToneIcon = (toneId: number) => {
|
||||
const className = 'mr-2 w-[14px] h-[14px]'
|
||||
const res = ({
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user