fix(editor): Fix execution running status listener for chat messages (#…

…12951)

packages/editor-ui/src/components/CanvasChat/CanvasChat.test.ts

@@ -215,6 +215,7 @@ describe('CanvasChat', () => {
 			// Send message
 			const input = await findByTestId('chat-input');
 			await userEvent.type(input, 'Hello AI!');
+
 			await userEvent.keyboard('{Enter}');
 
 			// Verify message and response
@@ -263,14 +264,18 @@ describe('CanvasChat', () => {
 			// Send message
 			const input = await findByTestId('chat-input');
 			await userEvent.type(input, 'Test message');
+
+			workflowsStore.isWorkflowRunning = true;
 			await userEvent.keyboard('{Enter}');
 
 			await waitFor(() => expect(queryByTestId('chat-message-typing')).toBeInTheDocument());
 
+			workflowsStore.isWorkflowRunning = false;
 			workflowsStore.getWorkflowExecution = {
 				...(mockWorkflowExecution as unknown as IExecutionResponse),
 				status: 'success',
 			};
+
 			await waitFor(() => expect(queryByTestId('chat-message-typing')).not.toBeInTheDocument());
 		});
 

packages/editor-ui/src/components/CanvasChat/CanvasChat.vue

@@ -175,28 +175,18 @@ const closePanel = () => {
 // This function creates a promise that resolves when the workflow execution completes
 // It's used to handle the loading state while waiting for the workflow to finish
 async function createExecutionPromise() {
-	let resolvePromise: () => void;
-	const promise = new Promise<void>((resolve) => {
-		resolvePromise = resolve;
-	});
-
-	// Watch for changes in the workflow execution status
-	const stopWatch = watch(
-		() => workflowsStore.getWorkflowExecution?.status,
-		(newStatus) => {
-			// If the status is no longer 'running', resolve the promise
-			if (newStatus && newStatus !== 'running') {
-				resolvePromise();
-				// Stop the watcher when the promise is resolved
-				stopWatch();
+	return await new Promise<void>((resolve) => {
+		const resolveIfFinished = (isRunning: boolean) => {
+			if (!isRunning) {
+				unwatch();
+				resolve();
 			}
-		},
-		{ immediate: true }, // Check the status immediately when the watcher is set up
-	);
+		};
 
-	// Return the promise, which will resolve when the workflow execution is complete
-	// This allows the caller to await the execution and handle the loading state appropriately
-	return await promise;
+		// Watch for changes in the workflow execution status
+		const unwatch = watch(() => workflowsStore.isWorkflowRunning, resolveIfFinished);
+		resolveIfFinished(workflowsStore.isWorkflowRunning);
+	});
 }
 
 async function onRunChatWorkflow(payload: RunWorkflowChatPayload) {