mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-05 13:40:36 +08:00
handle var value change
This commit is contained in:
jZonG
parent
55a6ade90e
commit
85c98dd20a
@ -79,7 +79,6 @@ const useInspectVarsCrud = () => {
|
||||
|
||||
const editInspectVarValue = useCallback(async (nodeId: string, varId: string, value: any) => {
|
||||
await doEditInspectorVar({
|
||||
nodeId,
|
||||
varId,
|
||||
value,
|
||||
})
|
||||
@ -101,7 +100,6 @@ const useInspectVarsCrud = () => {
|
||||
|
||||
const renameInspectVarName = async (nodeId: string, varId: string, selector: ValueSelector) => {
|
||||
await doEditInspectorVar({
|
||||
nodeId,
|
||||
varId,
|
||||
name: selector[1],
|
||||
})
|
||||
|
||||
@ -49,4 +49,14 @@ export const systemVars: VarInInspect[] = [
|
||||
value: 'Hello robot!',
|
||||
edited: false,
|
||||
},
|
||||
{
|
||||
id: 'sys2',
|
||||
type: VarInInspectType.system,
|
||||
name: 'user_id',
|
||||
description: '',
|
||||
selector: ['sys', 'user_id'],
|
||||
value_type: VarType.string,
|
||||
value: 'djflakjerlkjdlksfjslakjsdfl',
|
||||
edited: false,
|
||||
},
|
||||
]
|
||||
|
||||
@ -11,7 +11,6 @@ import Button from '@/app/components/base/button'
|
||||
// import ActionButton from '@/app/components/base/action-button'
|
||||
// import Tooltip from '@/app/components/base/tooltip'
|
||||
import BlockIcon from '@/app/components/workflow/block-icon'
|
||||
import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
|
||||
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
|
||||
import Group from './group'
|
||||
import useCurrentVars from '../hooks/use-inspect-vars-crud'
|
||||
@ -39,6 +38,8 @@ const Left = ({
|
||||
deleteAllInspectorVars,
|
||||
} = useCurrentVars()
|
||||
|
||||
const showDivider = environmentVariables.length > 0 || conversationVars.length > 0 || systemVars.length > 0
|
||||
|
||||
// TODO node selection
|
||||
const selectedNode = 3 < 4
|
||||
|
||||
@ -69,34 +70,21 @@ const Left = ({
|
||||
handleSelect={handleVarSelect}
|
||||
/>
|
||||
)}
|
||||
{/* group CHAT VAR */}
|
||||
<div className='p-0.5'>
|
||||
{/* node item */}
|
||||
<div className='flex h-6 items-center gap-0.5'>
|
||||
<RiArrowRightSLine className='h-3 w-3 rotate-90 text-text-tertiary' />
|
||||
<div className='flex grow cursor-pointer items-center gap-1'>
|
||||
<div className='system-xs-medium-uppercase truncate text-text-tertiary'>{t('workflow.chatVariable.panelTitle')}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* var item list */}
|
||||
<div className='px-0.5'>
|
||||
<div className={cn('relative flex cursor-pointer items-center gap-1 rounded-md px-3 py-1 hover:bg-state-base-hover')}>
|
||||
<BubbleX className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
|
||||
<div className='system-sm-medium grow truncate text-text-secondary'>chat_history</div>
|
||||
<div className='system-xs-regular shrink-0 text-text-tertiary'>array</div>
|
||||
</div>
|
||||
<div className={cn('relative flex cursor-pointer items-center gap-1 rounded-md px-3 py-1 hover:bg-state-base-hover')}>
|
||||
{selectedNode && <span className='absolute left-1.5 top-[10.5px] h-[3px] w-[3px] rounded-full bg-text-accent-secondary'></span>}
|
||||
<BubbleX className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
|
||||
<div className='system-sm-medium grow truncate text-text-secondary'>custom_chat_history</div>
|
||||
<div className='system-xs-regular shrink-0 text-text-tertiary'>array</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* group SYSTEM VAR */}
|
||||
{conversationVars.length > 0 && (
|
||||
<Group
|
||||
varType={VarInInspectType.system}
|
||||
varList={systemVars}
|
||||
currentVar={currentNodeVar}
|
||||
handleSelect={handleVarSelect}
|
||||
/>
|
||||
)}
|
||||
{/* divider */}
|
||||
{showDivider && (
|
||||
<div className='px-4 py-1'>
|
||||
<div className='h-px bg-divider-subtle'></div>
|
||||
</div>
|
||||
)}
|
||||
{/* group nodes */}
|
||||
<div className='p-0.5'>
|
||||
{/* node item */}
|
||||
|
||||
@ -36,8 +36,14 @@ const Right = ({
|
||||
|
||||
const {
|
||||
resetToLastRunVar,
|
||||
editInspectVarValue,
|
||||
} = useCurrentVars()
|
||||
|
||||
const handleValueChange = (varId: string, value: any) => {
|
||||
if (!currentNodeVar) return
|
||||
editInspectVarValue(currentNodeVar.nodeId, varId, value)
|
||||
}
|
||||
|
||||
const resetValue = () => {
|
||||
if (!currentNodeVar) return
|
||||
resetToLastRunVar(currentNodeVar.nodeId, currentNodeVar.var.name)
|
||||
@ -109,7 +115,7 @@ const Right = ({
|
||||
{/* content */}
|
||||
<div className='grow p-2'>
|
||||
{!currentNodeVar && <Empty />}
|
||||
{currentNodeVar && <ValueContent currentVar={currentNodeVar.var} />}
|
||||
{currentNodeVar && <ValueContent currentVar={currentNodeVar.var} handleValueChange={handleValueChange} />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
// import { useTranslation } from 'react-i18next'
|
||||
import { debounce } from 'lodash-es'
|
||||
import { useDebounceFn } from 'ahooks'
|
||||
import Textarea from '@/app/components/base/textarea'
|
||||
import SchemaEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor'
|
||||
import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
|
||||
@ -23,38 +22,14 @@ import type { VarInInspect } from '@/types/workflow'
|
||||
import { VarInInspectType } from '@/types/workflow'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
export const MOCK_DATA = {
|
||||
id: 'var-jfkldjjfkldaf-dfhekdfj',
|
||||
type: 'node',
|
||||
// type: 'conversation',
|
||||
// type: 'environment',
|
||||
name: 'out_put',
|
||||
// value_type: 'string',
|
||||
// value_type: 'number',
|
||||
// value_type: 'object',
|
||||
// value_type: 'array[string]',
|
||||
// value_type: 'array[number]',
|
||||
// value_type: 'array[object]',
|
||||
// value_type: 'file',
|
||||
value_type: 'array[file]',
|
||||
// value: 'tuituitui',
|
||||
// value: ['aaa', 'bbb', 'ccc'],
|
||||
// value: {
|
||||
// abc: '123',
|
||||
// def: 456,
|
||||
// fff: true,
|
||||
// },
|
||||
value: [],
|
||||
edited: true,
|
||||
}
|
||||
|
||||
type Props = {
|
||||
currentVar: VarInInspect
|
||||
handleValueChange: (varId: string, value: any) => void
|
||||
}
|
||||
|
||||
const ValueContent = ({
|
||||
// currentVar = MOCK_DATA as any, // TODO remove this line
|
||||
currentVar,
|
||||
handleValueChange,
|
||||
}: Props) => {
|
||||
const contentContainerRef = useRef<HTMLDivElement>(null)
|
||||
const errorMessageRef = useRef<HTMLDivElement>(null)
|
||||
@ -62,6 +37,7 @@ const ValueContent = ({
|
||||
const showTextEditor = currentVar.value_type === 'secret' || currentVar.value_type === 'string' || currentVar.value_type === 'number'
|
||||
const showJSONEditor = currentVar.value_type === 'object' || currentVar.value_type === 'array[string]' || currentVar.value_type === 'array[number]' || currentVar.value_type === 'array[object]'
|
||||
const showFileEditor = currentVar.value_type === 'file' || currentVar.value_type === 'array[file]'
|
||||
const textEditorDisabled = currentVar.type === VarInInspectType.environment || (currentVar.type === VarInInspectType.system && currentVar.name !== 'query')
|
||||
|
||||
const [value, setValue] = useState<any>()
|
||||
const [jsonSchema, setJsonSchema] = useState()
|
||||
@ -77,8 +53,11 @@ const ValueContent = ({
|
||||
: [],
|
||||
)
|
||||
|
||||
const { run: debounceValueChange } = useDebounceFn(handleValueChange, { wait: 500 })
|
||||
|
||||
// update default value when id changed
|
||||
useEffect(() => {
|
||||
console.log('currentVar', currentVar)
|
||||
if (showTextEditor) {
|
||||
if (!currentVar.value)
|
||||
return setValue('')
|
||||
@ -107,7 +86,7 @@ const ValueContent = ({
|
||||
if (/^-?\d+(\.)?(\d+)?$/.test(value))
|
||||
setValue(value)
|
||||
}
|
||||
// TODO call api of value update
|
||||
debounceValueChange(currentVar.id, value)
|
||||
}
|
||||
|
||||
const jsonValueValidate = (value: string, type: string) => {
|
||||
@ -152,21 +131,26 @@ const ValueContent = ({
|
||||
if (jsonValueValidate(value, currentVar.value_type)) {
|
||||
const parsed = JSON.parse(value)
|
||||
setJsonSchema(parsed)
|
||||
// TODO call api of value update
|
||||
debounceValueChange(currentVar.id, parsed)
|
||||
}
|
||||
}
|
||||
|
||||
const handleFileChange = (value: any) => {
|
||||
console.log('value', value)
|
||||
const fileValueValidate = (fileList: any[]) => {
|
||||
if (fileList.every(file => file.upload_file_id))
|
||||
return true
|
||||
return false
|
||||
}
|
||||
|
||||
const handleFileChange = (value: any[]) => {
|
||||
setFileValue(value)
|
||||
// TODO check every file upload progress
|
||||
// check every file upload progress
|
||||
// invoke update api after every file uploaded
|
||||
if (currentVar.value_type === 'file') {
|
||||
// TODO call api of value update
|
||||
}
|
||||
if (currentVar.value_type === 'array[file]') {
|
||||
// TODO call api of value update
|
||||
}
|
||||
if (!fileValueValidate(value))
|
||||
return
|
||||
if (currentVar.value_type === 'file')
|
||||
debounceValueChange(currentVar.id, value[0])
|
||||
if (currentVar.value_type === 'array[file]')
|
||||
debounceValueChange(currentVar.id, value)
|
||||
}
|
||||
|
||||
// get editor height
|
||||
@ -194,8 +178,8 @@ const ValueContent = ({
|
||||
<div className={cn('grow')} style={{ height: `${editorHeight}px` }}>
|
||||
{showTextEditor && (
|
||||
<Textarea
|
||||
readOnly={currentVar.type === VarInInspectType.environment}
|
||||
disabled={currentVar.type === VarInInspectType.environment}
|
||||
readOnly={textEditorDisabled}
|
||||
disabled={textEditorDisabled}
|
||||
className='h-full'
|
||||
value={value as any}
|
||||
onChange={e => handleTextChange(e.target.value)}
|
||||
@ -206,7 +190,7 @@ const ValueContent = ({
|
||||
className='overflow-y-auto'
|
||||
hideTopMenu
|
||||
schema={json}
|
||||
onUpdate={debounce(handleEditorChange)}
|
||||
onUpdate={handleEditorChange}
|
||||
/>
|
||||
)}
|
||||
{showFileEditor && (
|
||||
|
||||
@ -169,7 +169,7 @@ export const useSysVarValues = (appId: string) => {
|
||||
return Promise.resolve(systemVars.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
value: `${item.value}${index++}`,
|
||||
value: item.value_type === 'string' ? `${item.value}${index++}` : item.value,
|
||||
}
|
||||
}))
|
||||
},
|
||||
@ -212,7 +212,6 @@ export const useEditInspectorVar = (appId: string) => {
|
||||
return useMutation({
|
||||
mutationKey: [NAME_SPACE, 'edit inspector var', appId],
|
||||
mutationFn: async (params: {
|
||||
nodeId: string
|
||||
varId: string
|
||||
name?: string
|
||||
value?: any
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user