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

fix: model param inner ui

This commit is contained in:
Joel 2024-03-21 18:14:03 +08:00
parent 3a00941125
commit a771d59b1e
3 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/base/tag-input/index.tsx
View File

@ -13,6 +13,7 @@ type TagInputProps = {
disableRemove?: boolean
disableAdd?: boolean
customizedConfirmKey?: 'Enter' | 'Tab'
isInWorkflow?: boolean
}
const TagInput: FC<TagInputProps> = ({
@ -21,6 +22,7 @@ const TagInput: FC<TagInputProps> = ({
disableAdd,
disableRemove,
customizedConfirmKey = 'Enter',
isInWorkflow,
}) => {
const { t } = useTranslation()
const { notify } = useToastContext()
@ -64,7 +66,7 @@ const TagInput: FC<TagInputProps> = ({
}
return (
<div className={cn('flex flex-wrap', isSpecialMode ? 'bg-gray-100 min-w-[200px] rounded-lg pb-1 pl-1' : '')}>
<div className={cn('flex flex-wrap', !isInWorkflow && 'min-w-[200px]', isSpecialMode ? 'bg-gray-100 rounded-lg pb-1 pl-1' : '')}>
{
items.map((item, index) => (
<div

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

@ -88,7 +88,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
}) => {
const { t } = useTranslation()
const { hasSettedApiKey } = useProviderContext()
const [open, setOpen] = useState(false)
const [open, setOpen] = useState(true)
const { data: parameterRulesData, isLoading } = useSWR((provider && modelId) ? `/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}` : null, fetchModelParameterRules)
const {
currentProvider,
@ -213,9 +213,12 @@ 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='max-h-[480px] px-10 pt-6 pb-8 overflow-y-auto'>
<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='font-semibold text-gray-900'>
<div className={cn('font-semibold text-gray-900', isInWorkflow && 'text-[13px]')}>
{t('common.modelProvider.model').toLocaleUpperCase()}
</div>
<ModelSelector
@ -237,7 +240,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
{
!isLoading && !!parameterRules.length && (
<div className='flex items-center justify-between mb-4'>
<div className='text-gray-900 font-semibold'>{t('common.modelProvider.parameters')}</div>
<div className={cn('font-semibold text-gray-900', isInWorkflow && 'text-[13px]')}>{t('common.modelProvider.parameters')}</div>
{
PROVIDER_WITH_PRESET_TONE.includes(provider) && (
<PresetsParameter onSelect={handleSelectPresetParameter} />
@ -259,6 +262,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
value={completionParams[parameter.name]}
onChange={v => handleParamChange(parameter.name, v)}
onSwitch={(checked, assignValue) => handleSwitch(parameter.name, checked, assignValue)}
isInWorkflow={isInWorkflow}
/>
))
)

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

@ -1,5 +1,6 @@
import type { FC } from 'react'
import { useEffect, useRef, useState } from 'react'
import cn from 'classnames'
import type { ModelParameterRule } from '../declarations'
import { useLanguage } from '../hooks'
import { isNullOrUndefined } from '../utils'
@ -19,6 +20,7 @@ type ParameterItemProps = {
onChange?: (value: ParameterValue) => void
className?: string
onSwitch?: (checked: boolean, assignValue: ParameterValue) => void
isInWorkflow?: boolean
}
const ParameterItem: FC<ParameterItemProps> = ({
parameterRule,
@ -26,6 +28,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
onChange,
className,
onSwitch,
isInWorkflow,
}) => {
const language = useLanguage()
const [localValue, setLocalValue] = useState(value)
@ -122,8 +125,8 @@ const ParameterItem: FC<ParameterItemProps> = ({
const renderInput = () => {
const numberInputWithSlide = (parameterRule.type === 'int' || parameterRule.type === 'float')
&& !isNullOrUndefined(parameterRule.min)
&& !isNullOrUndefined(parameterRule.max)
&& !isNullOrUndefined(parameterRule.min)
&& !isNullOrUndefined(parameterRule.max)
if (parameterRule.type === 'int' || parameterRule.type === 'float') {
let step = 100
@ -178,7 +181,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
if (parameterRule.type === 'string' && !parameterRule.options?.length) {
return (
<input
className='flex items-center px-3 w-[200px] h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
className={cn(isInWorkflow ? 'w-[200px]' : 'w-full', 'flex items-center px-3 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900')}
value={renderValue as string}
onChange={handleStringInputChange}
/>
@ -189,7 +192,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
return (
<SimpleSelect
className='!py-0'
wrapperClassName='!w-[200px] !h-8'
wrapperClassName={cn(isInWorkflow ? '!w-[200px]' : 'w-full', '!h-8')}
defaultValue={renderValue as string}
onSelect={handleSelect}
items={parameterRule.options.map(option => ({ value: option, name: option }))}
@ -199,11 +202,12 @@ const ParameterItem: FC<ParameterItemProps> = ({
if (parameterRule.type === 'tag') {
return (
<div className='w-[200px]'>
<div className={isInWorkflow ? 'w-[200px]' : 'w-full'}>
<TagInput
items={renderValue as string[]}
onChange={handleTagChange}
customizedConfirmKey='Tab'
isInWorkflow={isInWorkflow}
/>
</div>
)
@ -215,7 +219,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
return (
<div className={`flex items-center justify-between ${className}`}>
<div>
<div className='shrink-0 flex items-center w-[200px]'>
<div className={cn(isInWorkflow ? 'w-[200px]' : 'w-full', 'shrink-0 flex items-center')}>
<div
className='mr-0.5 text-[13px] font-medium text-gray-700 truncate'
title={parameterRule.label[language] || parameterRule.label.en_US}