Loading...
Loading...
用于开发 FastGPT 工作流中的交互响应。详细说明了交互节点的架构、开发流程和需要修改的文件。
npx skill4agent add microck/ordinary-claude-skills workflow-interactive-devpackages/global/core/workflow/template/system/interactive/type.d.ts// 基础交互结构
type InteractiveBasicType = {
entryNodeIds: string[]; // 入口节点ID列表
memoryEdges: RuntimeEdgeItemType[]; // 需要记忆的边
nodeOutputs: NodeOutputItemType[]; // 节点输出
skipNodeQueue?: Array; // 跳过的节点队列
usageId?: string; // 用量记录ID
};
// 具体交互节点类型
type YourInteractiveNode = InteractiveNodeType & {
type: 'yourNodeType';
params: {
// 节点特定参数
};
};packages/service/core/workflow/dispatch/index.ts:1012-1019// 部分交互节点不会自动重置 isEntry 标志(因为需要根据 isEntry 字段来判断是首次进入还是流程进入)
runtimeNodes.forEach((item) => {
if (
item.flowNodeType !== FlowNodeTypeEnum.userSelect &&
item.flowNodeType !== FlowNodeTypeEnum.formInput &&
item.flowNodeType !== FlowNodeTypeEnum.agent
) {
item.isEntry = false;
}
});packages/global/core/workflow/template/system/interactive/type.d.tsexport type YourInputItemType = {
// 定义输入项的结构
key: string;
label: string;
value: any;
// ... 其他字段
};
type YourInteractiveNode = InteractiveNodeType & {
type: 'yourNodeType';
params: {
description: string;
yourInputField: YourInputItemType[];
submitted?: boolean; // 可选:是否已提交
};
};
// 添加到联合类型
export type InteractiveNodeResponseType =
| UserSelectInteractive
| UserInputInteractive
| YourInteractiveNode // 新增
| ChildrenInteractive
| LoopInteractive
| PaymentPauseInteractive;packages/global/core/workflow/node/constant.tsexport enum FlowNodeTypeEnum {
// ... 现有类型
yourNodeType = 'yourNodeType', // 新增节点类型
}packages/global/core/workflow/template/system/interactive/yourNode.tsimport { i18nT } from '../../../../../../web/i18n/utils';
import {
FlowNodeTemplateTypeEnum,
NodeInputKeyEnum,
NodeOutputKeyEnum,
WorkflowIOValueTypeEnum
} from '../../../constants';
import {
FlowNodeInputTypeEnum,
FlowNodeOutputTypeEnum,
FlowNodeTypeEnum
} from '../../../node/constant';
import { type FlowNodeTemplateType } from '../../../type/node';
export const YourNode: FlowNodeTemplateType = {
id: FlowNodeTypeEnum.yourNodeType,
templateType: FlowNodeTemplateTypeEnum.interactive,
flowNodeType: FlowNodeTypeEnum.yourNodeType,
showSourceHandle: true, // 是否显示源连接点
showTargetHandle: true, // 是否显示目标连接点
avatar: 'core/workflow/template/yourNode',
name: i18nT('app:workflow.your_node'),
intro: i18nT('app:workflow.your_node_tip'),
isTool: true, // 标记为工具节点
inputs: [
{
key: NodeInputKeyEnum.description,
renderTypeList: [FlowNodeInputTypeEnum.textarea],
valueType: WorkflowIOValueTypeEnum.string,
label: i18nT('app:workflow.node_description'),
placeholder: i18nT('app:workflow.your_node_placeholder')
},
{
key: NodeInputKeyEnum.yourInputField,
renderTypeList: [FlowNodeInputTypeEnum.custom],
valueType: WorkflowIOValueTypeEnum.any,
label: '',
value: [] // 默认值
}
],
outputs: [
{
id: NodeOutputKeyEnum.yourResult,
key: NodeOutputKeyEnum.yourResult,
required: true,
label: i18nT('workflow:your_result'),
valueType: WorkflowIOValueTypeEnum.object,
type: FlowNodeOutputTypeEnum.static
}
]
};packages/service/core/workflow/dispatch/interactive/yourNode.tsimport { DispatchNodeResponseKeyEnum } from '@fastgpt/global/core/workflow/runtime/constants';
import type {
DispatchNodeResultType,
ModuleDispatchProps
} from '@fastgpt/global/core/workflow/runtime/type';
import type { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { NodeOutputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import type { YourInputItemType } from '@fastgpt/global/core/workflow/template/system/interactive/type';
import { chatValue2RuntimePrompt } from '@fastgpt/global/core/chat/adapt';
type Props = ModuleDispatchProps<{
[NodeInputKeyEnum.description]: string;
[NodeInputKeyEnum.yourInputField]: YourInputItemType[];
}>;
type YourNodeResponse = DispatchNodeResultType<{
[NodeOutputKeyEnum.yourResult]?: Record<string, any>;
}>;
export const dispatchYourNode = async (props: Props): Promise<YourNodeResponse> => {
const {
histories,
node,
params: { description, yourInputField },
query,
lastInteractive
} = props;
const { isEntry } = node;
// 第一阶段:非入口节点或不是对应的交互类型,返回交互请求
if (!isEntry || lastInteractive?.type !== 'yourNodeType') {
return {
[DispatchNodeResponseKeyEnum.interactive]: {
type: 'yourNodeType',
params: {
description,
yourInputField
}
}
};
}
// 第二阶段:处理用户提交的数据
node.isEntry = false; // 重要:重置入口标志
const { text } = chatValue2RuntimePrompt(query);
const userInputVal = (() => {
try {
return JSON.parse(text); // 根据实际格式解析
} catch (error) {
return {};
}
})();
return {
data: {
[NodeOutputKeyEnum.yourResult]: userInputVal
},
// 移除当前交互的历史记录(最后2条)
[DispatchNodeResponseKeyEnum.rewriteHistories]: histories.slice(0, -2),
[DispatchNodeResponseKeyEnum.toolResponses]: userInputVal,
[DispatchNodeResponseKeyEnum.nodeResponse]: {
yourResult: userInputVal
}
};
};packages/service/core/workflow/dispatch/constants.tsimport { dispatchYourNode } from './interactive/yourNode';
export const callbackMap: Record<FlowNodeTypeEnum, any> = {
// ... 现有节点
[FlowNodeTypeEnum.yourNodeType]: dispatchYourNode,
};projects/app/src/components/core/chat/components/Interactive/InteractiveComponents.tsxexport const YourNodeComponent = React.memo(function YourNodeComponent({
interactiveParams: { description, yourInputField, submitted },
defaultValues = {},
SubmitButton
}: {
interactiveParams: YourInteractiveNode['params'];
defaultValues?: Record<string, any>;
SubmitButton: (e: { onSubmit: UseFormHandleSubmit<Record<string, any>> }) => React.JSX.Element;
}) {
const { handleSubmit, control } = useForm({
defaultValues
});
return (
<Box>
<DescriptionBox description={description} />
<Flex flexDirection={'column'} gap={3}>
{yourInputField.map((input) => (
<Box key={input.key}>
{/* 渲染你的输入组件 */}
<Controller
control={control}
name={input.key}
render={({ field: { onChange, value } }) => (
<YourInputComponent
value={value}
onChange={onChange}
isDisabled={submitted}
/>
)}
/>
</Box>
))}
</Flex>
{!submitted && (
<Flex justifyContent={'flex-end'} mt={4}>
<SubmitButton onSubmit={handleSubmit} />
</Flex>
)}
</Box>
);
});projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeYourNode.tsximport React, { useMemo } from 'react';
import { type NodeProps } from 'reactflow';
import { Box, Button } from '@chakra-ui/react';
import NodeCard from './render/NodeCard';
import { type FlowNodeItemType } from '@fastgpt/global/core/workflow/type/node.d';
import Container from '../components/Container';
import RenderInput from './render/RenderInput';
import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { useTranslation } from 'next-i18next';
import { type FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
import { useContextSelector } from 'use-context-selector';
import IOTitle from '../components/IOTitle';
import RenderOutput from './render/RenderOutput';
import { WorkflowActionsContext } from '../../context/workflowActionsContext';
const NodeYourNode = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { t } = useTranslation();
const { nodeId, inputs, outputs } = data;
const onChangeNode = useContextSelector(WorkflowActionsContext, (v) => v.onChangeNode);
const CustomComponent = useMemo(
() => ({
[NodeInputKeyEnum.yourInputField]: (v: FlowNodeInputItemType) => {
// 自定义渲染逻辑
return (
<Box>
{/* 你的自定义UI */}
</Box>
);
}
}),
[nodeId, onChangeNode, t]
);
return (
<NodeCard minW={'400px'} selected={selected} {...data}>
<Container>
<RenderInput nodeId={nodeId} flowInputList={inputs} CustomComponent={CustomComponent} />
</Container>
<Container>
<IOTitle text={t('common:Output')} />
<RenderOutput nodeId={nodeId} flowOutputList={outputs} />
</Container>
</NodeCard>
);
};
export default React.memo(NodeYourNode);packages/web/i18n/zh-CN/app.json{
"workflow": {
"your_node": "你的节点名称",
"your_node_tip": "节点功能说明",
"your_node_placeholder": "提示文本"
}
}FastGPT/packages/service/core/chat/saveChat.tsupdateInteractiveChatFastGPT/projects/app/src/components/core/chat/ChatContainer/ChatBox/utils.tsFastGPT/packages/global/core/workflow/runtime/utils.tssetInteractiveResultToHistoriesgetInteractiveByHistoriesgetLastInteractiveValueisEntry// 在 packages/service/core/workflow/dispatch/index.ts 中
// 确保你的节点类型被添加到白名单
if (
item.flowNodeType !== FlowNodeTypeEnum.userSelect &&
item.flowNodeType !== FlowNodeTypeEnum.formInput &&
item.flowNodeType !== FlowNodeTypeEnum.yourNodeType // 新增
) {
item.isEntry = false;
}interactive// 第一阶段
if (!isEntry || lastInteractive?.type !== 'yourNodeType') {
return {
[DispatchNodeResponseKeyEnum.interactive]: {
type: 'yourNodeType',
params: { /* ... */ }
}
};
}
// 第二阶段
node.isEntry = false; // 重要!重置标志
// 处理用户输入...return {
// 移除交互对话的历史记录(用户问题 + 系统响应)
[DispatchNodeResponseKeyEnum.rewriteHistories]: histories.slice(0, -2),
// ... 其他返回值
};skipNodeQueueisTool: trueuserSelectpackages/global/core/workflow/template/system/interactive/type.d.ts:48-55packages/service/core/workflow/dispatch/interactive/userSelect.tsprojects/app/src/components/core/chat/components/Interactive/InteractiveComponents.tsx:29-63formInputpackages/global/core/workflow/template/system/interactive/type.d.ts:57-82packages/service/core/workflow/dispatch/interactive/formInput.tsprojects/app/src/components/core/chat/components/Interactive/InteractiveComponents.tsx:65-126node.isEntry = falseisEntrychatValue2RuntimePromptpackages/global/core/workflow/template/system/interactive/type.d.tspackages/global/core/workflow/node/constant.tspackages/global/core/workflow/template/system/interactive/yourNode.tspackages/service/core/workflow/dispatch/interactive/yourNode.tspackages/service/core/workflow/dispatch/constants.tspackages/service/core/workflow/dispatch/index.tsprojects/app/src/components/core/chat/components/Interactive/InteractiveComponents.tsxprojects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeYourNode.tsxpackages/web/i18n/zh-CN/app.jsonpackages/web/i18n/en/app.jsonpackages/web/i18n/zh-Hant/app.jsonpackages/global/core/workflow/constants.tsexport enum NodeInputKeyEnum {
// ... 现有键
yourInputKey = 'yourInputKey',
}
export enum NodeOutputKeyEnum {
// ... 现有键
yourOutputKey = 'yourOutputKey',
}