ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

node var list

Browse Source
pull/21369/head
jZonG 1 year ago
parent 85c98dd20a
commit 24f02f0166
7 changed files with 101 additions and 111 deletions
Show Stats Download Patch File Download Diff File

2
web/app/components/workflow/hooks/use-inspect-vars-crud.ts
Unescape Escape View File

@ -1,6 +1,7 @@
import { fetchNodeInspectVars } from '@/service/workflow'
import { useWorkflowStore } from '../store'
import type { ValueSelector } from '../types'
import { VarInInspectType } from '@/types/workflow'
import {
useConversationVarValues,
useDeleteAllInspectorVars,
@ -82,6 +83,7 @@ const useInspectVarsCrud = () => {
varId,
value,
})
if (nodeId !== VarInInspectType.conversation && nodeId !== VarInInspectType.system)
setInspectVarValue(nodeId, varId, value)
}, [doEditInspectorVar, setInspectVarValue])

12
web/app/components/workflow/store/workflow/debug/mock-data.ts
Unescape Escape View File

@ -6,13 +6,23 @@ export const vars: VarInInspect[] = [
{
id: 'xxx',
type: VarInInspectType.node,
name: 'llm 2',
name: 'text',
description: '',
selector: ['1745476079387', 'text'],
value_type: VarType.string,
value: 'text value...',
edited: false,
},
{
id: 'fdklajljgldjglkagjlk',
type: VarInInspectType.node,
name: 'text',
description: '',
selector: ['1712386917734', 'text'],
value_type: VarType.string,
value: 'made zhizhang',
edited: false,
},
]
export const conversationVars: VarInInspect[] = [

79
web/app/components/workflow/variable-inspect/group.tsx
Unescape Escape View File

@ -2,14 +2,15 @@ import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
RiArrowRightSLine,
RiDeleteBinLine,
RiFileList3Line,
RiLoader2Line,
// RiErrorWarningFill,
// RiLoader2Line,
} from '@remixicon/react'
// import { BlockEnum } from '../types'
// 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 ActionButton from '@/app/components/base/action-button'
import Tooltip from '@/app/components/base/tooltip'
import BlockIcon from '@/app/components/workflow/block-icon'
import {
BubbleX,
Env,
@ -17,21 +18,27 @@ import {
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import type { currentVarType } from './panel'
import { VarInInspectType } from '@/types/workflow'
import type { VarInInspect } from '@/types/workflow'
import type { NodeWithVar, VarInInspect } from '@/types/workflow'
import cn from '@/utils/classnames'
type Props = {
nodeData?: NodeWithVar
currentVar?: currentVarType
varType: VarInInspectType
varList: VarInInspect[]
handleSelect: (state: any) => void
handleView?: () => void
handleClear?: () => void
}
const Group = ({
nodeData,
currentVar,
varType,
varList,
handleSelect,
handleView,
handleClear,
}: Props) => {
const { t } = useTranslation()
const [isCollapsed, setIsCollapsed] = useState(false)
@ -43,8 +50,8 @@ const Group = ({
const handleSelectVar = (varItem: any, type?: string) => {
if (type === VarInInspectType.environment) {
handleSelect({
nodeId: 'env',
nodeTitle: 'env',
nodeId: VarInInspectType.environment,
title: VarInInspectType.environment,
nodeType: VarInInspectType.environment,
var: {
...varItem,
@ -56,9 +63,9 @@ const Group = ({
}
if (type === VarInInspectType.conversation) {
handleSelect({
nodeId: 'conversation',
nodeTitle: 'conversation',
nodeId: VarInInspectType.conversation,
nodeType: VarInInspectType.conversation,
title: VarInInspectType.conversation,
var: {
...varItem,
type: VarInInspectType.conversation,
@ -68,9 +75,9 @@ const Group = ({
}
if (type === VarInInspectType.system) {
handleSelect({
nodeId: 'sys',
nodeTitle: 'sys',
nodeId: VarInInspectType.system,
nodeType: VarInInspectType.system,
title: VarInInspectType.system,
var: {
...varItem,
type: VarInInspectType.system,
@ -78,29 +85,61 @@ const Group = ({
})
return
}
if (!nodeData) return
handleSelect({
nodeId: varItem.nodeId,
nodeTitle: varItem.nodeTitle,
nodeType: varItem.nodeType,
var: varItem.var,
nodeId: nodeData.nodeId,
nodeType: nodeData.nodeType,
title: nodeData.title,
var: varItem,
})
}
return (
<div className='p-0.5'>
{/* node item */}
<div className='flex h-6 items-center gap-0.5'>
<RiArrowRightSLine className={cn('h-3 w-3 text-text-tertiary', !isCollapsed && 'rotate-90')} />
<div className='group flex h-6 items-center gap-0.5'>
{nodeData?.isSingRunRunning && (
<RiLoader2Line className='h-3 w-3 animate-spin text-text-accent' />
)}
{(!nodeData || !nodeData.isSingRunRunning) && (
<RiArrowRightSLine className={cn('h-3 w-3 text-text-tertiary', !isCollapsed && 'rotate-90')} onClick={() => setIsCollapsed(!isCollapsed)} />
)}
<div className='flex grow cursor-pointer items-center gap-1' onClick={() => setIsCollapsed(!isCollapsed)}>
{nodeData && (
<>
<BlockIcon
className='shrink-0'
type={nodeData.nodeType}
size='xs'
/>
<div className='system-xs-medium-uppercase truncate text-text-tertiary'>{nodeData.title}</div>
</>
)}
{!nodeData && (
<div className='system-xs-medium-uppercase truncate text-text-tertiary'>
{isEnv && t('workflow.debug.variableInspect.envNode')}
{isChatVar && t('workflow.debug.variableInspect.chatNode')}
{isSystem && t('workflow.debug.variableInspect.systemNode')}
</div>
)}
</div>
{nodeData && !nodeData.isSingRunRunning && (
<div className='hidden shrink-0 items-center group-hover:flex'>
<Tooltip popupContent={t('workflow.debug.variableInspect.view')}>
<ActionButton onClick={handleView}>
<RiFileList3Line className='h-4 w-4' />
</ActionButton>
</Tooltip>
<Tooltip popupContent={t('workflow.debug.variableInspect.clearNode')}>
<ActionButton onClick={handleClear}>
<RiDeleteBinLine className='h-4 w-4' />
</ActionButton>
</Tooltip>
</div>
)}
</div>
{/* var item list */}
{!isCollapsed && (
{!isCollapsed && !nodeData?.isSingRunRunning && (
<div className='px-0.5'>
{varList.length > 0 && varList.map(varItem => (
<div
@ -113,7 +152,7 @@ const Group = ({
>
{isEnv && <Env className='h-4 w-4 shrink-0 text-util-colors-violet-violet-600' />}
{isChatVar && <BubbleX className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />}
{isSystem && <Variable02 className='h-4 w-4 shrink-0 text-text-accent' />}
{(isSystem || nodeData) && <Variable02 className='h-4 w-4 shrink-0 text-text-accent' />}
<div className='system-sm-medium grow truncate text-text-secondary'>{varItem.name}</div>
<div className='system-xs-regular shrink-0 text-text-tertiary'>{varItem.value_type}</div>
</div>

83
web/app/components/workflow/variable-inspect/left.tsx
Unescape Escape View File

@ -1,19 +1,13 @@
// import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
RiArrowRightSLine,
RiErrorWarningFill,
RiLoader2Line,
} from '@remixicon/react'
import { useStore } from '../store'
import { BlockEnum } from '../types'
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 { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import Group from './group'
import useCurrentVars from '../hooks/use-inspect-vars-crud'
import { useNodesInteractions } from '../hooks/use-nodes-interactions'
import type { currentVarType } from './panel'
import type { VarInInspect } from '@/types/workflow'
import { VarInInspectType } from '@/types/workflow'
@ -36,13 +30,12 @@ const Left = ({
systemVars,
nodesWithInspectVars,
deleteAllInspectorVars,
deleteNodeInspectorVars,
} = useCurrentVars()
const { handleNodeSelect } = useNodesInteractions()
const showDivider = environmentVariables.length > 0 || conversationVars.length > 0 || systemVars.length > 0
// TODO node selection
const selectedNode = 3 < 4
return (
<div className={cn('flex h-full flex-col')}>
{/* header */}
@ -86,64 +79,18 @@ const Left = ({
</div>
)}
{/* group nodes */}
<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'>
<BlockIcon
className='shrink-0'
type={BlockEnum.LLM}
size='xs'
/>
<div className='system-xs-medium-uppercase truncate text-text-tertiary'>LLM</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')}>
<Variable02 className='h-4 w-4 text-text-accent' />
<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>}
<Variable02 className='h-4 w-4 text-text-warning' />
<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 nodes */}
<div className='p-0.5'>
{/* node item */}
<div className='flex h-6 items-center gap-0.5'>
<RiLoader2Line className='h-3 w-3 text-text-accent' />
<div className='flex grow cursor-pointer items-center gap-1'>
<BlockIcon
className='shrink-0'
type={BlockEnum.QuestionClassifier}
size='xs'
/>
<div className='system-xs-medium-uppercase truncate text-text-tertiary'>Question Classifier</div>
</div>
</div>
</div>
{/* group nodes */}
<div className='p-0.5'>
{/* node item */}
<div className='flex h-6 items-center gap-0.5'>
<RiErrorWarningFill className='h-3 w-3 text-text-destructive' />
<div className='flex grow cursor-pointer items-center gap-1'>
<BlockIcon
className='shrink-0'
type={BlockEnum.HttpRequest}
size='xs'
{nodesWithInspectVars.length > 0 && nodesWithInspectVars.map(group => (
<Group
key={group.nodeId}
varType={VarInInspectType.node}
varList={group.vars}
nodeData={group}
currentVar={currentNodeVar}
handleSelect={handleVarSelect}
handleView={() => handleNodeSelect(group.nodeId)}
handleClear={() => deleteNodeInspectorVars(group.nodeId)}
/>
<div className='system-xs-medium-uppercase truncate text-text-tertiary'>HTTP Request</div>
</div>
</div>
</div>
))}
</div>
</div>
)

4
web/app/components/workflow/variable-inspect/panel.tsx
Unescape Escape View File

@ -15,8 +15,8 @@ import cn from '@/utils/classnames'
export type currentVarType = {
nodeId: string
nodeTitle: string
nodeType: string
title: string
var: VarInInspect
}
@ -37,7 +37,7 @@ const Panel: FC = () => {
const isEmpty = useMemo(() => {
const allVars = [...environmentVariables, ...conversationVars, ...systemVars, ...nodesWithInspectVars]
return allVars.length === 0
}, [conversationVars, systemVars, nodesWithInspectVars])
}, [environmentVariables, conversationVars, systemVars, nodesWithInspectVars])
if (isEmpty) {
return (

2
web/app/components/workflow/variable-inspect/right.tsx
Unescape Escape View File

@ -77,7 +77,7 @@ const Right = ({
type={currentNodeVar.nodeType as BlockEnum}
size='xs'
/>
<div className='system-sm-regular shrink-0 text-text-secondary'>{currentNodeVar.nodeTitle}</div>
<div className='system-sm-regular shrink-0 text-text-secondary'>{currentNodeVar.title}</div>
<div className='system-sm-regular shrink-0 text-text-quaternary'>/</div>
</>
)}

16
web/app/components/workflow/variable-inspect/value-content.tsx
Unescape Escape View File

@ -40,7 +40,6 @@ const ValueContent = ({
const textEditorDisabled = currentVar.type === VarInInspectType.environment || (currentVar.type === VarInInspectType.system && currentVar.name !== 'query')
const [value, setValue] = useState<any>()
const [jsonSchema, setJsonSchema] = useState()
const [json, setJson] = useState('')
const [parseError, setParseError] = useState<Error | null>(null)
const [validationError, setValidationError] = useState<string>('')
@ -57,7 +56,6 @@ const ValueContent = ({
// update default value when id changed
useEffect(() => {
console.log('currentVar', currentVar)
if (showTextEditor) {
if (!currentVar.value)
return setValue('')
@ -65,10 +63,9 @@ const ValueContent = ({
return setValue(JSON.stringify(currentVar.value))
setValue(currentVar.value)
}
if (showJSONEditor) {
setJsonSchema(currentVar.value || null)
if (showJSONEditor)
setJson(currentVar.value ? JSON.stringify(currentVar.value, null, 2) : '')
}
if (showFileEditor) {
setFileValue(currentVar.value_type === 'array[file]'
? currentVar.value || []
@ -130,16 +127,11 @@ const ValueContent = ({
setJson(value)
if (jsonValueValidate(value, currentVar.value_type)) {
const parsed = JSON.parse(value)
setJsonSchema(parsed)
debounceValueChange(currentVar.id, parsed)
}
}
const fileValueValidate = (fileList: any[]) => {
if (fileList.every(file => file.upload_file_id))
return true
return false
}
const fileValueValidate = (fileList: any[]) => fileList.every(file => file.upload_file_id)
const handleFileChange = (value: any[]) => {
setFileValue(value)
@ -168,7 +160,7 @@ const ValueContent = ({
errorMessageObserver.disconnect()
}
}
}, [errorMessageRef.current, setEditorHeight])
}, [setEditorHeight])
return (
<div

Write Preview
Loading…
Cancel
Save