fix: wf step test (keephq#3593)

Author: Kiryous

keep-ui/features/workflows/builder/ui/BuilderChat/builder-chat.tsx

@@ -562,9 +562,5 @@ export function BuilderChatSafe({
     return null;
   }
 
-  return (
-    <CopilotKit runtimeUrl="/api/copilotkit">
-      <BuilderChat definition={definition} {...props} />
-    </CopilotKit>
-  );
+  return <BuilderChat definition={definition} {...props} />;
 }

keep-ui/features/workflows/builder/ui/Editor/StepEditor.tsx

@@ -560,6 +560,11 @@ export function StepEditorV2({
   const { data: { providers, installed_providers: installedProviders } = {} } =
     useProviders();
 
+  const installedProvider = installedProviders?.find(
+    (p) => p.type === providerType && p.details?.name === providerConfig
+  );
+  const providerId = installedProvider?.id;
+
   const providerNameError = validateProviderConfig(
     providerType,
     providerConfig ?? "",
@@ -720,7 +725,7 @@ export function StepEditorV2({
         <TabPanel className="flex-1">
           <TestRunStepForm
             providerInfo={{
-              provider_id: providerConfig ?? "",
+              provider_id: providerId || providerConfig || "",
               provider_type: providerType ?? "",
             }}
             method={method}

keep-ui/features/workflows/builder/ui/Editor/StepTest.tsx

@@ -5,6 +5,10 @@ import { Callout, Text } from "@tremor/react";
 import { useMemo, useState } from "react";
 import { EditorLayout } from "./StepEditor";
 import { Editor } from "@monaco-editor/react";
+import { SparklesIcon } from "@heroicons/react/24/outline";
+import { useCopilotChat } from "@copilotkit/react-core";
+import { Role } from "@copilotkit/runtime-client-gql";
+import { TextMessage } from "@copilotkit/runtime-client-gql";
 
 export function useTestStep() {
   const api = useApi();
@@ -28,6 +32,50 @@ export function useTestStep() {
   return testStep;
 }
 
+const WFDebugWithAI = ({
+  errors,
+  description,
+}: {
+  errors: { [key: string]: string };
+  description: string;
+}) => {
+  const { appendMessage } = useCopilotChat();
+  return (
+    <Button
+      variant="secondary"
+      color="orange"
+      size="xs"
+      icon={SparklesIcon}
+      onClick={() => {
+        appendMessage(
+          new TextMessage({
+            content: `Help me debug this error ${description}: ${JSON.stringify(
+              errors
+            )}. If you propose a fix, make it concise and to the point.`,
+            role: Role.User,
+          })
+        );
+      }}
+    >
+      Debug with AI
+    </Button>
+  );
+};
+
+const WFDebugWithAIButton = ({
+  errors,
+  description,
+}: {
+  errors: { [key: string]: string };
+  description: string;
+}) => {
+  try {
+    return <WFDebugWithAI errors={errors} description={description} />;
+  } catch (e) {
+    return null;
+  }
+};
+
 const variablesRegex = /{{[\s]*.*?[\s]*}}/g;
 
 export function TestRunStepForm({
@@ -218,18 +266,26 @@ export function TestRunStepForm({
         {errors &&
           Object.values(errors).length > 0 &&
           Object.entries(errors).map(([key, error]) => (
-            <Callout
+            <div
               key={key}
-              title={key}
-              color="red"
+              className="flex flex-col gap-2 items-end"
               ref={(el) => {
                 if (el) {
                   el.scrollIntoView({ behavior: "smooth", block: "start" });
                 }
               }}
             >
-              {error}
-            </Callout>
+              <Callout title={key} color="red">
+                {error}
+                <div className="mt-2"></div>
+              </Callout>
+              <WFDebugWithAIButton
+                errors={errors}
+                description={`in step test run ${providerInfo.provider_type}, with parameters ${JSON.stringify(
+                  resultingParameters
+                )}`}
+              />
+            </div>
           ))}
       </EditorLayout>
       <div className="sticky flex justify-end bottom-0 px-4 py-2.5 bg-white border-t border-gray-200">

keep-ui/widgets/workflow-builder/builder.tsx

@@ -24,6 +24,7 @@ import { BuilderChatSafe } from "@/features/workflows/builder/ui/BuilderChat/bui
 import clsx from "clsx";
 import { ResizableColumns } from "@/shared/ui";
 import { useConfig } from "@/utils/hooks/useConfig";
+import { CopilotKit } from "@copilotkit/react-core";
 
 interface Props {
   loadedAlertFile: string | null;
@@ -309,4 +310,15 @@ function Builder({
   );
 }
 
-export default Builder;
+export default function BuilderWrapper(props: Props) {
+  const { data: configData } = useConfig();
+  const isAIEnabled = configData?.OPEN_AI_API_KEY_SET;
+  if (!isAIEnabled) {
+    return <Builder {...props} />;
+  }
+  return (
+    <CopilotKit runtimeUrl="/api/copilotkit">
+      <Builder {...props} />
+    </CopilotKit>
+  );
+}