hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-25 02:33:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

FEAT: NEW WORKFLOW ENGINE (#3160)

Browse Source 
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>
This commit is contained in:
takatost
2024-04-08 18:51:46 +08:00
committed by GitHub
parent 2fb9850af5
commit 7753ba2d37
1161 changed files with 103836 additions and 10327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,6 +19,9 @@ import Tooltip from '@/app/components/base/tooltip-plus'
import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
import Radio from '@/app/components/base/radio'
type FormProps = {
className?: string
itemClassName?: string
fieldLabelClassName?: string
value: FormValue
onChange: (val: FormValue) => void
formSchemas: CredentialFormSchema[]
@@ -33,6 +36,9 @@ type FormProps = {
}
const Form: FC<FormProps> = ({
className,
itemClassName,
fieldLabelClassName,
value,
onChange,
formSchemas,
@@ -89,8 +95,8 @@ const Form: FC<FormProps> = ({
const disabed = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
return (
<div key={variable} className='py-3'>
<div className='py-2 text-sm text-gray-900'>
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
{label[language] || label.en_US}
{
required && (
@@ -130,8 +136,8 @@ const Form: FC<FormProps> = ({
const disabed = isEditMode && (variable === '__model_type' || variable === '__model_name')
return (
<div key={variable} className='py-3'>
<div className='py-2 text-sm text-gray-900'>
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
{label[language] || label.en_US}
{
required && (
@@ -186,8 +192,8 @@ const Form: FC<FormProps> = ({
return null
return (
<div key={variable} className='py-3'>
<div className='py-2 text-sm text-gray-900'>
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
{label[language] || label.en_US}
{
@@ -227,7 +233,7 @@ const Form: FC<FormProps> = ({
return null
return (
<div key={variable} className='py-3'>
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className='flex items-center justify-between py-2 text-sm text-gray-900'>
<div className='flex items-center space-x-2'>
<span>{label[language] || label.en_US}</span>
@@ -249,7 +255,7 @@ const Form: FC<FormProps> = ({
}
return (
<div>
<div className={className}>
{
formSchemas.map(formSchema => renderField(formSchema))
}

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

@@ -5,6 +5,7 @@ import type {
import { useEffect, useMemo, useState } from 'react'
import useSWR from 'swr'
import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import type {
DefaultModel,
FormValue,
@@ -33,6 +34,8 @@ import { TONE_LIST } from '@/config'
import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
export type ModelParameterModalProps = {
popupClassName?: string
portalToFollowElemContentClassName?: string
isAdvancedMode: boolean
mode: string
modelId: string
@@ -40,9 +43,12 @@ export type ModelParameterModalProps = {
setModel: (model: { modelId: string; provider: string; mode?: string; features?: string[] }) => void
completionParams: FormValue
onCompletionParamsChange: (newParams: FormValue) => void
debugWithMultipleModel: boolean
onDebugWithMultipleModelChange: () => void
hideDebugWithMultipleModel?: boolean
debugWithMultipleModel?: boolean
onDebugWithMultipleModelChange?: () => void
renderTrigger?: (v: TriggerProps) => ReactNode
readonly?: boolean
isInWorkflow?: boolean
}
const stopParameerRule: ModelParameterRule = {
default: [],
@@ -65,15 +71,20 @@ const stopParameerRule: ModelParameterRule = {
const PROVIDER_WITH_PRESET_TONE = ['openai', 'azure_openai']
const ModelParameterModal: FC<ModelParameterModalProps> = ({
popupClassName,
portalToFollowElemContentClassName,
isAdvancedMode,
modelId,
provider,
setModel,
completionParams,
onCompletionParamsChange,
hideDebugWithMultipleModel,
debugWithMultipleModel,
onDebugWithMultipleModelChange,
renderTrigger,
readonly,
isInWorkflow,
}) => {
const { t } = useTranslation()
const { hasSettedApiKey } = useProviderContext()
@@ -167,7 +178,11 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
>
<div className='relative'>
<PortalToFollowElemTrigger
onClick={() => setOpen(v => !v)}
onClick={() => {
if (readonly)
return
setOpen(v => !v)
}}
className='block'
>
{
@@ -185,6 +200,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
: (
<Trigger
disabled={disabled}
isInWorkflow={isInWorkflow}
modelDisabled={modelDisabled}
hasDeprecated={hasDeprecated}
currentProvider={currentProvider}
@@ -195,11 +211,14 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
)
}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[60]'>
<div className='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'>
<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='font-semibold text-gray-900'>
<div className={cn('font-semibold text-gray-900', isInWorkflow && 'text-[13px]')}>
{t('common.modelProvider.model').toLocaleUpperCase()}
</div>
<ModelSelector
@@ -221,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} />
@@ -243,22 +262,25 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
value={completionParams[parameter.name]}
onChange={v => handleParamChange(parameter.name, v)}
onSwitch={(checked, assignValue) => handleSwitch(parameter.name, checked, assignValue)}
isInWorkflow={isInWorkflow}
/>
))
)
}
</div>
<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'
onClick={() => onDebugWithMultipleModelChange()}
>
{
debugWithMultipleModel
? t('appDebug.debugAsSingleModel')
: t('appDebug.debugAsMultipleModel')
}
<ArrowNarrowLeft className='w-3 h-3 rotate-180' />
</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'
onClick={() => onDebugWithMultipleModelChange?.()}
>
{
debugWithMultipleModel
? t('appDebug.debugAsSingleModel')
: t('appDebug.debugAsMultipleModel')
}
<ArrowNarrowLeft className='w-3 h-3 rotate-180' />
</div>
)}
</div>
</PortalToFollowElemContent>
</div>

18
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-[140px]' : '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}
@@ -246,7 +250,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
</div>
{
parameterRule.type === 'tag' && (
<div className='w-[200px] text-gray-400 text-xs font-normal'>
<div className={cn(!isInWorkflow && 'w-[200px]', ' text-gray-400 text-xs font-normal')}>
{parameterRule?.tagPlaceholder?.[language]}
</div>
)

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

@@ -57,7 +57,7 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
renderTrigger={renderTrigger}
items={options}
onSelect={item => onSelect(item.value as number)}
popupClassName='z-[70]'
popupClassName='z-[1003]'
/>
)
}

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

@@ -1,5 +1,6 @@
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import type {
Model,
ModelItem,
@@ -13,6 +14,7 @@ import { useProviderContext } from '@/context/provider-context'
import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
export type TriggerProps = {
open?: boolean
@@ -23,6 +25,7 @@ export type TriggerProps = {
modelId?: string
hasDeprecated?: boolean
modelDisabled?: boolean
isInWorkflow?: boolean
}
const Trigger: FC<TriggerProps> = ({
disabled,
@@ -32,6 +35,7 @@ const Trigger: FC<TriggerProps> = ({
modelId,
hasDeprecated,
modelDisabled,
isInWorkflow,
}) => {
const { t } = useTranslation()
const language = useLanguage()
@@ -39,10 +43,12 @@ const Trigger: FC<TriggerProps> = ({
return (
<div
className={`
flex items-center px-2 h-8 rounded-lg border cursor-pointer hover:border-[1.5px]
${disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'}
`}
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 && 'bg-gray-100 border border-gray-100 hover:border-gray-200',
)}
>
{
currentProvider && (
@@ -68,9 +74,9 @@ const Trigger: FC<TriggerProps> = ({
className='mr-1.5 text-gray-900'
modelItem={currentModel}
showMode
modeClassName='!text-[#444CE7] !border-[#A4BCFD]'
modeClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
showFeatures
featuresClassName='!text-[#444CE7] !border-[#A4BCFD]'
featuresClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
/>
)
}
@@ -97,9 +103,10 @@ const Trigger: FC<TriggerProps> = ({
</TooltipPlus>
)
: (
<SlidersH className='w-4 h-4 text-indigo-600' />
<SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-gray-500', 'w-4 h-4')} />
)
}
{isInWorkflow && (<ChevronDown className='absolute top-[9px] right-2 w-3.5 h-3.5 text-gray-500' />)}
</div>
)
}

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

@@ -74,6 +74,7 @@ const ModelSelector: FC<ModelSelectorProps> = ({
provider={currentProvider}
model={currentModel}
className={triggerClassName}
readonly={readonly}
/>
)
}
@@ -95,7 +96,7 @@ const ModelSelector: FC<ModelSelectorProps> = ({
)
}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className={`z-[60] ${popupClassName}`}>
<PortalToFollowElemContent className={`z-[1002] ${popupClassName}`}>
<Popup
defaultModel={defaultModel}
modelList={modelList}

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

@@ -19,19 +19,22 @@ type ModelTriggerProps = {
provider: Model
model: ModelItem
className?: string
readonly?: boolean
}
const ModelTrigger: FC<ModelTriggerProps> = ({
open,
provider,
model,
className,
readonly,
}) => {
const language = useLanguage()
return (
<div
className={`
group flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
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]'}
@@ -48,21 +51,24 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
showMode
showFeatures
/>
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
{
model.status !== ModelStatusEnum.active
? (
<TooltipPlus popupContent={MODEL_STATUS_TEXT[model.status][language]}>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</TooltipPlus>
)
: (
<ChevronDown
className='w-3.5 h-3.5 text-gray-500'
/>
)
}
</div>
{!readonly && (
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
{
model.status !== ModelStatusEnum.active
? (
<TooltipPlus popupContent={MODEL_STATUS_TEXT[model.status][language]}>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</TooltipPlus>
)
: (
<ChevronDown
className='w-3.5 h-3.5 text-gray-500'
/>
)
}
</div>
)}
</div>
)
}