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

feat: node before and after run

This commit is contained in:
Joel 2024-03-15 11:26:10 +08:00
parent 86d2c1184c
commit 1b8c8b0a43
8 changed files with 130 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
View File

@ -1,6 +1,7 @@
'use client'
import type { FC } from 'react'
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import produce from 'immer'
import RemoveButton from '../remove-button'
import VarReferencePicker from './var-reference-picker'
@ -26,6 +27,8 @@ const VarList: FC<Props> = ({
onlyLeafNodeVar,
onlyVarType,
}) => {
const { t } = useTranslation()
const handleVarNameChange = useCallback((index: number) => {
return (e: React.ChangeEvent<HTMLInputElement>) => {
const newList = produce(list, (draft) => {
@ -54,7 +57,7 @@ const VarList: FC<Props> = ({
})
onChange(newList)
}
}, [list, onChange])
}, [isSupportConstantValue, list, onChange])
const handleVarRemove = useCallback((index: number) => {
return () => {
@ -73,8 +76,10 @@ const VarList: FC<Props> = ({
readOnly={readonly}
value={list[index].variable}
onChange={handleVarNameChange(index)}
className='w-[120px] h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px] placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
type='text' />
placeholder={t('workflow.common.variableNamePlaceholder')!}
className='w-[120px] h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px] placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
type='text'
/>
<VarReferencePicker
nodeId={nodeId}
readonly={readonly}

46
web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
View File

@ -1,6 +1,7 @@
'use client'
import type { FC } from 'react'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import { isArray } from 'lodash-es'
import VarReferencePopup from './var-reference-popup'
@ -57,6 +58,8 @@ const VarReferencePicker: FC<Props> = ({
onlyLeafNodeVar,
onlyVarType,
}) => {
const { t } = useTranslation()
const isChatMode = useIsChatMode()
const [varKindType, setVarKindType] = useState<VarKindType>(defaultVarKindType)
const isConstant = isSupportConstantValue && varKindType === VarKindType.static
@ -110,7 +113,8 @@ const VarReferencePicker: FC<Props> = ({
onChange('', value)
else
onChange([], value)
}, [varKindType])
}, [onChange])
const inputRef = useRef<HTMLInputElement>(null)
const [isFocus, setIsFocus] = useState(false)
const [controlFocus, setControlFocus] = useState(0)
@ -166,27 +170,29 @@ const VarReferencePicker: FC<Props> = ({
)
: (
<div className={cn('inline-flex h-full items-center px-1.5 rounded-[5px]', hasValue && 'bg-white')}>
{hasValue && (
<>
{isShowNodeName && (
<div className='flex items-center'>
<div className='p-[1px]'>
<VarBlockIcon
className='!text-gray-900'
type={outputVarNode?.type}
/>
{hasValue
? (
<>
{isShowNodeName && (
<div className='flex items-center'>
<div className='p-[1px]'>
<VarBlockIcon
className='!text-gray-900'
type={outputVarNode?.type}
/>
</div>
<div className='mx-0.5 text-xs font-medium text-gray-700'>{outputVarNode?.title}</div>
<Line3 className='mr-0.5'></Line3>
</div>
<div className='mx-0.5 text-xs font-medium text-gray-700'>{outputVarNode?.title}</div>
<Line3 className='mr-0.5'></Line3>
)}
<div className='flex items-center text-primary-600'>
<Variable02 className='w-3.5 h-3.5' />
<div className='ml-0.5 text-xs font-medium'>{varName}</div>
</div>
)}
<div className='flex items-center text-primary-600'>
<Variable02 className='w-3.5 h-3.5' />
<div className='ml-0.5 text-xs font-medium'>{varName}</div>
</div>
<div className='ml-0.5 text-xs font-normal text-gray-500 capitalize'>{getVarType()}</div>
</>
)}
<div className='ml-0.5 text-xs font-normal text-gray-500 capitalize'>{getVarType()}</div>
</>
)
: <div className='text-[13px] font-normal text-gray-400'>{t('workflow.common.setVarValuePlaceholder')}</div>}
</div>
)}
</div>

64
web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
View File

@ -1,28 +1,62 @@
import { useState } from 'react'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useNodeDataUpdate } from '@/app/components/workflow/hooks'
import type { CommonNodeType, InputVar, Variable } from '@/app/components/workflow/types'
import { InputVarType, NodeRunningStatus } from '@/app/components/workflow/types'
import type { CheckValidRes, CommonNodeType, InputVar, Variable } from '@/app/components/workflow/types'
import { BlockEnum, InputVarType, NodeRunningStatus } from '@/app/components/workflow/types'
import { useStore as useAppStore } from '@/app/components/app/store'
import { singleNodeRun } from '@/service/workflow'
// import Toast from '@/app/components/base/toast'
import Toast from '@/app/components/base/toast'
import CodeDefault from '@/app/components/workflow/nodes/code/default'
import HTTPDefault from '@/app/components/workflow/nodes/http/default'
const { checkValid: checkCodeValid } = CodeDefault
const checkValidFns: Record<BlockEnum, Function> = {
[BlockEnum.Code]: checkCodeValid,
[BlockEnum.HttpRequest]: HTTPDefault.checkValid,
} as any
type Params<T> = {
id: string
data: CommonNodeType<T>
defaultRunInputData: Record<string, any>
isInvalid?: () => boolean
beforeRunCheckValid?: () => CheckValidRes
}
const useOneStepRun = <T>({ id, data, defaultRunInputData, isInvalid = () => true }: Params<T>) => {
const useOneStepRun = <T>({
id,
data,
defaultRunInputData,
beforeRunCheckValid = () => ({ isValid: true }),
}: Params<T>) => {
const { t } = useTranslation()
const checkValid = checkValidFns[data.type]
const appId = useAppStore.getState().appDetail?.id
const [runInputData, setRunInputData] = useState<Record<string, any>>(defaultRunInputData || {})
const [runResult, setRunResult] = useState<any>(null)
const { handleNodeDataUpdate }: { handleNodeDataUpdate: (data: any) => void } = useNodeDataUpdate()
const isShowSingleRun = data._isSingleRun
const [canShowSingleRun, setCanShowSingleRun] = useState(false)
const isShowSingleRun = data._isSingleRun && canShowSingleRun
useEffect(() => {
if (data._isSingleRun) {
const { isValid, errorMessage } = checkValid(data, t)
setCanShowSingleRun(isValid)
if (!isValid) {
handleNodeDataUpdate({
id,
data: {
...data,
_isSingleRun: false,
},
})
Toast.notify({
type: 'error',
message: errorMessage,
})
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data._isSingleRun])
const hideSingleRun = () => {
handleNodeDataUpdate({
id,
@ -35,8 +69,14 @@ const useOneStepRun = <T>({ id, data, defaultRunInputData, isInvalid = () => tru
const runningStatus = data._singleRunningStatus || NodeRunningStatus.NotStart
const isCompleted = runningStatus === NodeRunningStatus.Succeeded || runningStatus === NodeRunningStatus.Failed
const handleRun = async () => {
if (!isInvalid())
return
const { isValid, errorMessage } = beforeRunCheckValid()
if (!isValid) {
Toast.notify({
type: 'error',
message: errorMessage!,
})
return false
}
handleNodeDataUpdate({
id,
data: {
@ -77,10 +117,6 @@ const useOneStepRun = <T>({ id, data, defaultRunInputData, isInvalid = () => tru
_singleRunningStatus: NodeRunningStatus.Succeeded,
},
})
// Toast.notify({
// type: 'success',
// message: t('common.api.success'),
// })
}
const handleStop = () => {

20
web/app/components/workflow/nodes/code/default.ts
View File

@ -2,6 +2,8 @@ import type { NodeDefault } from '../../types'
import { CodeLanguage, type CodeNodeType } from './types'
import { ALL_CHAT_AVAILABLE_BLOCKS, ALL_COMPLETION_AVAILABLE_BLOCKS } from '@/app/components/workflow/constants'
const i18nPrefix = 'workflow.errorMsg'
const nodeDefault: NodeDefault<CodeNodeType> = {
defaultValue: {
code: '',
@ -17,18 +19,22 @@ const nodeDefault: NodeDefault<CodeNodeType> = {
const nodes = isChatMode ? ALL_CHAT_AVAILABLE_BLOCKS : ALL_COMPLETION_AVAILABLE_BLOCKS
return nodes
},
checkValid(payload: CodeNodeType) {
let isValid = true
checkValid(payload: CodeNodeType, t: any) {
let errorMessages = ''
if (payload.type) {
isValid = true
errorMessages = ''
}
const { code, variables } = payload
if (!errorMessages && variables.filter(v => !v.variable).length > 0)
errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t(`${i18nPrefix}.fields.variable`) })
if (!errorMessages && variables.filter(v => !v.value_selector.length).length > 0)
errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t(`${i18nPrefix}.fields.variableValue`) })
if (!errorMessages && !code)
errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: t(`${i18nPrefix}.fields.code`) })
return {
isValid,
isValid: !errorMessages,
errorMessage: errorMessages,
}
},
}
export default nodeDefault

8
web/app/components/workflow/nodes/code/use-config.ts
View File

@ -48,6 +48,12 @@ const useConfig = (id: string, payload: CodeNodeType) => {
id,
data: inputs,
defaultRunInputData: {},
beforeRunCheckValid: () => {
return {
isValid: true,
// errorMessage: 'xxxx',
}
},
})
const varInputs = toVarInputs(inputs.variables)
@ -63,7 +69,7 @@ const useConfig = (id: string, payload: CodeNodeType) => {
const setInputVarValues = useCallback((newPayload: Record<string, any>) => {
setRunInputData(newPayload)
}, [runInputData, setRunInputData])
}, [setRunInputData])
return {
inputs,

7
web/app/components/workflow/types.ts
View File

@ -159,7 +159,7 @@ export type NodeDefault<T> = {
defaultValue: Partial<T>
getAvailablePrevNodes: (isChatMode: boolean) => BlockEnum[]
getAvailableNextNodes: (isChatMode: boolean) => BlockEnum[]
checkValid: (payload: T) => { isValid: boolean; errorMessage?: string }
checkValid: (payload: T, t: any) => { isValid: boolean; errorMessage?: string }
}
export type OnSelectBlock = (type: BlockEnum, toolDefaultValue?: ToolDefaultValue) => void
@ -199,3 +199,8 @@ export type OnNodeAdd = (
nextNodeTargetHandle?: string
}
) => void
export type CheckValidRes = {
isValid: boolean
errorMessage?: string
}

10
web/i18n/en-US/workflow.ts
View File

@ -24,6 +24,16 @@ const translation = {
addTitle: 'Add title...',
addDescription: 'Add description...',
noVar: 'No variable',
variableNamePlaceholder: 'Variable name',
setVarValuePlaceholder: 'Set variable',
},
errorMsg: {
fieldRequired: '{{field}} is required',
fields: {
variable: 'Variable Name',
variableValue: 'Variable Value',
code: 'Code',
},
},
singleRun: {
testRun: 'Test Run ',

10
web/i18n/zh-Hans/workflow.ts
View File

@ -24,6 +24,16 @@ const translation = {
addTitle: '添加标题...',
addDescription: '添加描述...',
noVar: '没有变量',
variableNamePlaceholder: '变量名',
setVarValuePlaceholder: '设置变量值',
},
errorMsg: {
fieldRequired: '{{field}} 不能为空',
fields: {
variable: '变量名',
variableValue: '变量值',
code: '代码',
},
},
singleRun: {
testRun: '测试运行 ',