From fb24fddb6001ee5a628a3b5935faae10c8e1a5f6 Mon Sep 17 00:00:00 2001 From: sd0ric4 <1286518974@qq.com> Date: Wed, 26 Mar 2025 18:14:06 +0800 Subject: [PATCH] feat: Merge selections and next actions to remove unused state management --- .../chat/components/InteractiveComponents.tsx | 194 +++++++----------- 1 file changed, 71 insertions(+), 123 deletions(-) diff --git a/projects/app/src/components/core/chat/components/InteractiveComponents.tsx b/projects/app/src/components/core/chat/components/InteractiveComponents.tsx index c1dc2d211..d2cda5531 100644 --- a/projects/app/src/components/core/chat/components/InteractiveComponents.tsx +++ b/projects/app/src/components/core/chat/components/InteractiveComponents.tsx @@ -34,17 +34,14 @@ export const RenderUserSelectInteractive = React.memo(function RenderInteractive nodeId?: string; }) { const { t } = useTranslation(); - const [selectedValue, setSelectedValue] = useState(undefined); + // 在两个组件中更新上下文选择器，添加 onStartNodeDebug - const { onChangeNode, onStartNodeDebug, workflowDebugData } = useContextSelector( - WorkflowContext, - (v) => ({ - onChangeNode: v.onChangeNode, - onStartNodeDebug: v.onStartNodeDebug, - // onNextNodeDebug: v.onNextNodeDebug, // 不再使用 - workflowDebugData: v.workflowDebugData - }) - ); + const { onStartNodeDebug, workflowDebugData } = useContextSelector(WorkflowContext, (v) => ({ + onStartNodeDebug: v.onStartNodeDebug, + // onNextNodeDebug: v.onNextNodeDebug, // 不再使用 + workflowDebugData: v.workflowDebugData + })); + /** * 创建交互数据结构 * @param nodeId 交互节点ID @@ -97,88 +94,68 @@ export const RenderUserSelectInteractive = React.memo(function RenderInteractive } ]; }; - const handleSelect = useCallback( + + // 合并选择和下一步操作 + const handleSelectAndNext = useCallback( (value: string) => { if (!nodeId || !workflowDebugData) return; - // 保存选中的值到本地状态 - setSelectedValue(value); + // 创建包含用户选择的查询数据 + const updatedQuery: UserChatItemValueItemType[] = [ + ...(workflowDebugData.query || []), + { + type: ChatItemValueTypeEnum.text, + text: { + content: value || '' + } + } as UserChatItemValueItemType + ]; + + // 创建模拟的历史记录 + const mockHistory = createMockHistory(nodeId, interactive, workflowDebugData.runtimeEdges); + + // 使用模拟的历史记录初始化边状态 + const updatedRuntimeEdges = initWorkflowEdgeStatus( + workflowDebugData.runtimeEdges, + mockHistory + ); + + // 更新 runtimeNodes 以反映用户的选择 + const updatedRuntimeNodes = workflowDebugData.runtimeNodes.map((node) => { + if (node.nodeId === nodeId) { + // 找到我们需要的输入字段并更新它 + return { + ...node, + inputs: node.inputs.map((input) => { + // 根据您的实际字段结构，这里可能需要调整 + if (input.key === 'userSelect' || input.key === 'selectedOption') { + return { + ...input, + value: value + }; + } + return input; + }), + // 添加或更新任何需要的节点属性 + userSelectedVal: value + }; + } + return node; + }); + + // 使用 onStartNodeDebug 替代 onNextNodeDebug，带上更新后的 nodes 和 edges + onStartNodeDebug({ + entryNodeId: nodeId, + runtimeNodes: updatedRuntimeNodes, + runtimeEdges: updatedRuntimeEdges, + variables: workflowDebugData.variables, + query: updatedQuery, + history: mockHistory + }); }, - [nodeId, workflowDebugData] + [nodeId, workflowDebugData, onStartNodeDebug, interactive] ); - const handleStartDebug = useCallback(() => { - if (!nodeId || !workflowDebugData) return; - - // 先将当前节点设置为入口节点 - onChangeNode({ - nodeId, - type: 'attr', - key: 'isEntry', - value: true - }); - - // 更新此节点的值（将用户选择保存到节点） - if (selectedValue) { - onChangeNode({ - nodeId, - type: 'attr', - key: 'userSelectedVal', - value: selectedValue - }); - } - - // 创建包含用户选择的查询数据 - const updatedQuery: UserChatItemValueItemType[] = [ - ...(workflowDebugData.query || []), - { - type: ChatItemValueTypeEnum.text, - text: { - content: selectedValue || '' - } - } as UserChatItemValueItemType - ]; - // 创建模拟的历史记录 - const mockHistory = createMockHistory(nodeId, interactive, workflowDebugData.runtimeEdges); - - // 使用模拟的历史记录初始化边状态 - const updatedRuntimeEdges = initWorkflowEdgeStatus(workflowDebugData.runtimeEdges, mockHistory); - - // 更新 runtimeNodes 以反映用户的选择 - const updatedRuntimeNodes = workflowDebugData.runtimeNodes.map((node) => { - if (node.nodeId === nodeId) { - // 找到我们需要的输入字段并更新它 - return { - ...node, - inputs: node.inputs.map((input) => { - // 根据您的实际字段结构，这里可能需要调整 - if (input.key === 'userSelect' || input.key === 'selectedOption') { - return { - ...input, - value: selectedValue - }; - } - return input; - }), - // 添加或更新任何需要的节点属性 - userSelectedVal: selectedValue - }; - } - return node; - }); - - // 更新 runtimeEdges 状态 - - // 使用 onStartNodeDebug 替代 onNextNodeDebug，带上更新后的 nodes 和 edges - onStartNodeDebug({ - entryNodeId: nodeId, - runtimeNodes: updatedRuntimeNodes, - runtimeEdges: updatedRuntimeEdges, - variables: workflowDebugData.variables, - query: updatedQuery, - history: mockHistory - }); - }, [nodeId, workflowDebugData, onStartNodeDebug, onChangeNode, selectedValue, interactive]); return ( {interactive?.params?.description && ( @@ -195,8 +172,7 @@ export const RenderUserSelectInteractive = React.memo(function RenderInteractive )} {interactive.params.userSelectOptions?.map((option) => { - const selected = - option.value === selectedValue || option.value === interactive?.params?.userSelectedVal; + const selected = option.value === interactive?.params?.userSelectedVal; return ( ); })} - - {/* 添加下一步按钮，在选择完成后显示 */} - {(selectedValue !== undefined || interactive?.params?.userSelectedVal !== undefined) && ( - - - - )} ); }); @@ -272,14 +231,10 @@ export const RenderUserFormInteractive = React.memo(function RenderFormInput({ } = useForm(); const [isSubmitted, setIsSubmitted] = useState(false); // 在两个组件中更新上下文选择器，添加 onStartNodeDebug - const { onChangeNode, onStartNodeDebug, workflowDebugData } = useContextSelector( - WorkflowContext, - (v) => ({ - onChangeNode: v.onChangeNode, - onStartNodeDebug: v.onStartNodeDebug, - workflowDebugData: v.workflowDebugData - }) - ); + const { onStartNodeDebug, workflowDebugData } = useContextSelector(WorkflowContext, (v) => ({ + onStartNodeDebug: v.onStartNodeDebug, + workflowDebugData: v.workflowDebugData + })); /** * 创建交互数据结构 @@ -352,13 +307,6 @@ export const RenderUserFormInteractive = React.memo(function RenderFormInput({ // 直接调用 handleStartDebug，合并提交和下一步操作 const formData = getValues(); - onChangeNode({ - nodeId, - type: 'attr', - key: 'isEntry', - value: true - }); - const updatedQuery: UserChatItemValueItemType[] = [ ...(workflowDebugData.query || []), { @@ -420,7 +368,7 @@ export const RenderUserFormInteractive = React.memo(function RenderFormInput({ history: mockHistory }); }, - [nodeId, workflowDebugData, onStartNodeDebug, onChangeNode, getValues, interactive] + [nodeId, workflowDebugData, onStartNodeDebug, getValues, interactive] ); useEffect(() => {