From 24f02f01666066a0cca7f99835c22f0d738a4bba Mon Sep 17 00:00:00 2001 From: jZonG Date: Mon, 28 Apr 2025 21:02:07 +0800 Subject: [PATCH] node var list --- .../workflow/hooks/use-inspect-vars-crud.ts | 4 +- .../store/workflow/debug/mock-data.ts | 12 ++- .../workflow/variable-inspect/group.tsx | 89 +++++++++++++------ .../workflow/variable-inspect/left.tsx | 85 ++++-------------- .../workflow/variable-inspect/panel.tsx | 4 +- .../workflow/variable-inspect/right.tsx | 2 +- .../variable-inspect/value-content.tsx | 16 +--- 7 files changed, 101 insertions(+), 111 deletions(-) diff --git a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts index 10b6924ae6..f09d6d09ba 100644 --- a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts +++ b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts @@ -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,7 +83,8 @@ const useInspectVarsCrud = () => { varId, value, }) - setInspectVarValue(nodeId, varId, value) + if (nodeId !== VarInInspectType.conversation && nodeId !== VarInInspectType.system) + setInspectVarValue(nodeId, varId, value) }, [doEditInspectorVar, setInspectVarValue]) const [currNodeId, setCurrNodeId] = useState(null) diff --git a/web/app/components/workflow/store/workflow/debug/mock-data.ts b/web/app/components/workflow/store/workflow/debug/mock-data.ts index 41a55f3624..f7ebeff17d 100644 --- a/web/app/components/workflow/store/workflow/debug/mock-data.ts +++ b/web/app/components/workflow/store/workflow/debug/mock-data.ts @@ -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[] = [ diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx index d24a94c31f..26d24e8202 100644 --- a/web/app/components/workflow/variable-inspect/group.tsx +++ b/web/app/components/workflow/variable-inspect/group.tsx @@ -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 (
{/* node item */} -
- +
+ {nodeData?.isSingRunRunning && ( + + )} + {(!nodeData || !nodeData.isSingRunRunning) && ( + setIsCollapsed(!isCollapsed)} /> + )}
setIsCollapsed(!isCollapsed)}> -
- {isEnv && t('workflow.debug.variableInspect.envNode')} - {isChatVar && t('workflow.debug.variableInspect.chatNode')} - {isSystem && t('workflow.debug.variableInspect.systemNode')} -
+ {nodeData && ( + <> + +
{nodeData.title}
+ + )} + {!nodeData && ( +
+ {isEnv && t('workflow.debug.variableInspect.envNode')} + {isChatVar && t('workflow.debug.variableInspect.chatNode')} + {isSystem && t('workflow.debug.variableInspect.systemNode')} +
+ )}
+ {nodeData && !nodeData.isSingRunRunning && ( +
+ + + + + + + + + + +
+ )}
{/* var item list */} - {!isCollapsed && ( + {!isCollapsed && !nodeData?.isSingRunRunning && (
{varList.length > 0 && varList.map(varItem => (
{isEnv && } {isChatVar && } - {isSystem && } + {(isSystem || nodeData) && }
{varItem.name}
{varItem.value_type}
diff --git a/web/app/components/workflow/variable-inspect/left.tsx b/web/app/components/workflow/variable-inspect/left.tsx index 2fec6b1b01..5f52eeb19a 100644 --- a/web/app/components/workflow/variable-inspect/left.tsx +++ b/web/app/components/workflow/variable-inspect/left.tsx @@ -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 (
{/* header */} @@ -86,64 +79,18 @@ const Left = ({
)} {/* group nodes */} -
- {/* node item */} -
- -
- -
LLM
-
-
- {/* var item list */} -
-
- -
chat_history
-
array
-
-
- {selectedNode && } - -
custom_chat_history
-
array
-
-
-
- {/* group nodes */} -
- {/* node item */} -
- -
- -
Question Classifier
-
-
-
- {/* group nodes */} -
- {/* node item */} -
- -
- -
HTTP Request
-
-
-
+ {nodesWithInspectVars.length > 0 && nodesWithInspectVars.map(group => ( + handleNodeSelect(group.nodeId)} + handleClear={() => deleteNodeInspectorVars(group.nodeId)} + /> + ))}
) diff --git a/web/app/components/workflow/variable-inspect/panel.tsx b/web/app/components/workflow/variable-inspect/panel.tsx index 4c6a86d990..299e0d2dca 100644 --- a/web/app/components/workflow/variable-inspect/panel.tsx +++ b/web/app/components/workflow/variable-inspect/panel.tsx @@ -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 ( diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx index 22a6eefcd6..761bdd8627 100644 --- a/web/app/components/workflow/variable-inspect/right.tsx +++ b/web/app/components/workflow/variable-inspect/right.tsx @@ -77,7 +77,7 @@ const Right = ({ type={currentNodeVar.nodeType as BlockEnum} size='xs' /> -
{currentNodeVar.nodeTitle}
+
{currentNodeVar.title}
/
)} diff --git a/web/app/components/workflow/variable-inspect/value-content.tsx b/web/app/components/workflow/variable-inspect/value-content.tsx index 418fe97627..0a738dce1f 100644 --- a/web/app/components/workflow/variable-inspect/value-content.tsx +++ b/web/app/components/workflow/variable-inspect/value-content.tsx @@ -40,7 +40,6 @@ const ValueContent = ({ const textEditorDisabled = currentVar.type === VarInInspectType.environment || (currentVar.type === VarInInspectType.system && currentVar.name !== 'query') const [value, setValue] = useState() - const [jsonSchema, setJsonSchema] = useState() const [json, setJson] = useState('') const [parseError, setParseError] = useState(null) const [validationError, setValidationError] = useState('') @@ -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 (