Workflow Copilot: convert YAML -> workflow definition on BE side (#4461)

This commit is contained in:
Stanislav Novosad
2026-01-15 12:22:37 -07:00
committed by GitHub
parent d05e817dcc
commit 09f2903c18
7 changed files with 85 additions and 114 deletions

View File

@@ -7,14 +7,16 @@ import { ReloadIcon, Cross2Icon } from "@radix-ui/react-icons";
import { stringify as convertToYAML } from "yaml";
import { useWorkflowHasChangesStore } from "@/store/WorkflowHasChangesStore";
import { WorkflowCreateYAMLRequest } from "@/routes/workflows/types/workflowYamlTypes";
import { WorkflowDefinition } from "@/routes/workflows/types/workflowTypes";
import { toast } from "@/components/ui/use-toast";
import { getSseClient } from "@/api/sse";
import {
WorkflowCopilotChatHistoryResponse,
WorkflowCopilotProcessingUpdate,
WorkflowCopilotStreamError,
WorkflowCopilotStreamResponse,
WorkflowCopilotStreamErrorUpdate,
WorkflowCopilotStreamResponseUpdate,
WorkflowCopilotChatSender,
WorkflowCopilotChatRequest,
} from "./workflowCopilotTypes";
interface ChatMessage {
@@ -26,8 +28,8 @@ interface ChatMessage {
type WorkflowCopilotSsePayload =
| WorkflowCopilotProcessingUpdate
| WorkflowCopilotStreamResponse
| WorkflowCopilotStreamError;
| WorkflowCopilotStreamResponseUpdate
| WorkflowCopilotStreamErrorUpdate;
const formatChatTimestamp = (value: string) => {
let normalizedValue = value.replace(/\.(\d{3})\d*/, ".$1");
@@ -65,7 +67,7 @@ const MessageItem = memo(({ message }: { message: ChatMessage }) => {
});
interface WorkflowCopilotChatProps {
onWorkflowUpdate?: (workflowYaml: string) => void;
onWorkflowUpdate?: (workflow: WorkflowDefinition) => void;
isOpen?: boolean;
onClose?: () => void;
onMessageCountChange?: (count: number) => void;
@@ -317,8 +319,18 @@ export function WorkflowCopilotChat({
try {
const saveData = getSaveData();
const workflowId = saveData?.workflow.workflow_id;
let workflowYaml = "";
if (!workflowId) {
toast({
title: "Missing workflow",
description: "Workflow ID is required to chat.",
variant: "destructive",
});
return;
}
if (saveData) {
const extraHttpHeaders: Record<string, string> = {};
if (saveData.settings.extraHttpHeaders) {
@@ -397,7 +409,9 @@ export function WorkflowCopilotChat({
);
};
const handleResponse = (response: WorkflowCopilotStreamResponse) => {
const handleResponse = (
response: WorkflowCopilotStreamResponseUpdate,
) => {
setWorkflowCopilotChatId(response.workflow_copilot_chat_id);
const aiMessage: ChatMessage = {
@@ -409,9 +423,9 @@ export function WorkflowCopilotChat({
setMessages((prev) => [...prev, aiMessage]);
if (response.updated_workflow_yaml && onWorkflowUpdate) {
if (response.updated_workflow && onWorkflowUpdate) {
try {
onWorkflowUpdate(response.updated_workflow_yaml);
onWorkflowUpdate(response.updated_workflow as WorkflowDefinition);
} catch (updateError) {
console.error("Failed to update workflow:", updateError);
toast({
@@ -424,7 +438,7 @@ export function WorkflowCopilotChat({
}
};
const handleError = (payload: WorkflowCopilotStreamError) => {
const handleError = (payload: WorkflowCopilotStreamErrorUpdate) => {
const errorMessage: ChatMessage = {
id: Date.now().toString(),
sender: "ai",
@@ -437,12 +451,13 @@ export function WorkflowCopilotChat({
await client.postStreaming<WorkflowCopilotSsePayload>(
"/workflow/copilot/chat-post",
{
workflow_id: workflowId,
workflow_permanent_id: workflowPermanentId,
workflow_copilot_chat_id: workflowCopilotChatId,
workflow_run_id: workflowRunId,
message: messageContent,
workflow_yaml: workflowYaml,
},
} as WorkflowCopilotChatRequest,
(payload) => {
switch (payload.type) {
case "processing_update":

View File

@@ -20,6 +20,7 @@ export interface WorkflowCopilotChatMessage {
export interface WorkflowCopilotChatRequest {
workflow_permanent_id: string;
workflow_id: string;
workflow_copilot_chat_id?: string | null;
workflow_run_id?: string | null;
message: string;
@@ -48,15 +49,15 @@ export interface WorkflowCopilotProcessingUpdate {
timestamp: string;
}
export interface WorkflowCopilotStreamResponse {
export interface WorkflowCopilotStreamResponseUpdate {
type: "response";
workflow_copilot_chat_id: string;
message: string;
updated_workflow_yaml?: string | null;
updated_workflow?: Record<string, unknown> | null;
response_time: string;
}
export interface WorkflowCopilotStreamError {
export interface WorkflowCopilotStreamErrorUpdate {
type: "error";
error: string;
}

View File

@@ -87,11 +87,7 @@ import { getWorkflowErrors, getElements } from "./workflowEditorUtils";
import { WorkflowHeader } from "./WorkflowHeader";
import { WorkflowHistoryPanel } from "./panels/WorkflowHistoryPanel";
import { WorkflowVersion } from "../hooks/useWorkflowVersionsQuery";
import {
WorkflowApiResponse,
WorkflowBlock,
WorkflowSettings,
} from "../types/workflowTypes";
import { WorkflowApiResponse, WorkflowSettings } from "../types/workflowTypes";
import { ProxyLocation } from "@/api/types";
import {
nodeAdderNode,
@@ -100,16 +96,10 @@ import {
generateNodeLabel,
layout,
startNode,
upgradeWorkflowBlocksV1toV2,
} from "./workflowEditorUtils";
import { constructCacheKeyValue, getInitialParameters } from "./utils";
import { WorkflowCopilotChat } from "../copilot/WorkflowCopilotChat";
import { WorkflowCopilotButton } from "../copilot/WorkflowCopilotButton";
import { parse as parseYAML } from "yaml";
import {
BlockYAML,
WorkflowCreateYAMLRequest,
} from "../types/workflowYamlTypes";
import "./workspace-styles.css";
const Constants = {
@@ -1664,68 +1654,36 @@ function Workspace({
onClose={() => setIsCopilotOpen(false)}
onMessageCountChange={setCopilotMessageCount}
buttonRef={copilotButtonRef}
onWorkflowUpdate={(workflowYaml) => {
onWorkflowUpdate={(workflowData) => {
try {
const parsedYaml = parseYAML(
workflowYaml,
) as WorkflowCreateYAMLRequest;
const saveData = workflowChangesStore.getSaveData?.();
const settings: WorkflowSettings = {
proxyLocation:
parsedYaml.proxy_location || ProxyLocation.Residential,
webhookCallbackUrl: parsedYaml.webhook_callback_url || "",
saveData?.settings.proxyLocation || ProxyLocation.Residential,
webhookCallbackUrl: saveData?.settings.webhookCallbackUrl || "",
persistBrowserSession:
parsedYaml.persist_browser_session ?? false,
model: parsedYaml.model ?? null,
maxScreenshotScrolls: parsedYaml.max_screenshot_scrolls || 3,
extraHttpHeaders: parsedYaml.extra_http_headers
? JSON.stringify(parsedYaml.extra_http_headers)
: null,
runWith: parsedYaml.run_with ?? null,
scriptCacheKey: parsedYaml.cache_key ?? null,
aiFallback: parsedYaml.ai_fallback ?? true,
runSequentially: parsedYaml.run_sequentially ?? false,
sequentialKey: parsedYaml.sequential_key ?? null,
finallyBlockLabel:
parsedYaml.workflow_definition?.finally_block_label ?? null,
saveData?.settings.persistBrowserSession ?? false,
model: saveData?.settings.model ?? null,
maxScreenshotScrolls:
saveData?.settings.maxScreenshotScrolls || 3,
extraHttpHeaders: saveData?.settings.extraHttpHeaders ?? null,
runWith: saveData?.settings.runWith ?? null,
scriptCacheKey: saveData?.settings.scriptCacheKey ?? null,
aiFallback: saveData?.settings.aiFallback ?? true,
runSequentially: saveData?.settings.runSequentially ?? false,
sequentialKey: saveData?.settings.sequentialKey ?? null,
finallyBlockLabel: workflowData?.finally_block_label ?? null,
};
// Convert YAML blocks to internal format
// YAML has parameter_keys (array of strings), internal format has parameters (array of objects)
let blocks = (parsedYaml.workflow_definition?.blocks || []).map(
(block: BlockYAML) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const convertedBlock = { ...block } as any;
// Convert parameter_keys to parameters format
if ("parameter_keys" in block) {
convertedBlock.parameters = (block.parameter_keys || []).map(
(key: string) => ({
key,
parameter_type: "workflow",
}),
);
}
return convertedBlock;
},
) as WorkflowBlock[];
// Auto-upgrade v1 workflows to v2 by assigning sequential next_block_label values
const workflowVersion =
parsedYaml.workflow_definition?.version ?? 1;
if (workflowVersion < 2) {
blocks = upgradeWorkflowBlocksV1toV2(blocks);
}
const elements = getElements(blocks, settings, true);
const elements = getElements(workflowData.blocks, settings, true);
setNodes(elements.nodes);
setEdges(elements.edges);
const initialParameters = getInitialParameters({
workflow_definition: {
parameters: parsedYaml.workflow_definition?.parameters || [],
parameters: workflowData.parameters,
},
} as WorkflowApiResponse);
useWorkflowParametersStore
@@ -1734,11 +1692,14 @@ function Workspace({
workflowChangesStore.setHasChanges(true);
} catch (error) {
console.error("Failed to parse and apply workflow YAML", error);
console.log("YAML:", workflowYaml);
console.error(
"Failed to parse and apply workflow",
error,
workflowData,
);
toast({
title: "Update failed",
description: "Failed to parse workflow YAML. Please try again.",
description: "Failed to apply workflow update. Please try again.",
variant: "destructive",
});
}