@livechat/platform-workflows 0.0.89 → 0.0.90

package/dist/index.mjs

@@ -1,78 +1,13 @@
 "use client"
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __copyProps = (to, from2, except, desc) => {
-  if (from2 && typeof from2 === "object" || typeof from2 === "function") {
-    for (let key of __getOwnPropNames(from2))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc(from2, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
+import {
+  WORKFLOWS_TEST_SELECTORS,
+  __async,
+  __commonJS,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  __toESM
+} from "./chunk-Q53XLSIX.mjs";
 
 // ../../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.production.min.js
 var require_react_is_production_min = __commonJS({
@@ -2063,7 +1998,7 @@ var useDeleteWorkflow = () => {
       );
     }),
     {
-      onSuccess: (_, workflow) => {
+      onSuccess: (_2, workflow) => {
         queryClient.removeQueries(queryKeys.workflow.get(workflow.id));
         if (workflow.related_workflow_id) {
           queryClient.setQueryData(
@@ -2092,7 +2027,7 @@ var usePublishWorkflowDraft = () => {
       return { id: data.id };
     }),
     {
-      onSuccess: (_, draft) => __async(void 0, null, function* () {
+      onSuccess: (_2, draft) => __async(void 0, null, function* () {
         if (draft.related_workflow_id) {
           const workflow = yield api2.integrations.text.platform.workflow.workflows.getWorkflow(
             draft.related_workflow_id
@@ -2129,7 +2064,7 @@ var useActivateWorkflow = () => {
       );
     }),
     {
-      onSuccess: (_, { id }) => {
+      onSuccess: (_2, { id }) => {
         queryClient.setQueryData(
           queryKeys.workflow.get(id),
           (workflow) => workflow ? __spreadProps(__spreadValues({}, workflow), { active: true }) : workflow
@@ -2300,17 +2235,17 @@ function Waitlist({ image }) {
 var Waitlist_default = Waitlist;
 
 // src/views/Workflows/index.tsx
-import { useEffect as useEffect20 } from "react";
-import { Navigate as Navigate2, Route as Route6, Routes as Routes6, useNavigate as useNavigate21 } from "react-router-dom";
+import { useEffect as useEffect21 } from "react";
+import { Navigate as Navigate2, Route as Route6, Routes as Routes6, useNavigate as useNavigate22 } from "react-router-dom";
 import { Loader as Loader6 } from "@livechat/developer-studio-ui-react";
 
 // src/views/Workflows/Creator/index.tsx
 import {
   Route as Route3,
   Routes as Routes3,
-  useLocation as useLocation5,
-  useNavigate as useNavigate13,
-  useParams as useParams4
+  useLocation as useLocation6,
+  useNavigate as useNavigate14,
+  useParams as useParams5
 } from "react-router-dom";
 import {
   Loader as Loader3,
@@ -2348,7 +2283,7 @@ var WORKFLOW_TRIGGER_OUTPUT_SCHEMA = (body) => ({
   }
 });
 var WORKFLOW_HTTP_TASK_SCHEMA = (name = "http", overrides) => {
-  var _a, _b;
+  var _a, _b, _c;
   return {
     required: ["type", "name", "inputParameters"],
     properties: {
@@ -2367,7 +2302,7 @@ var WORKFLOW_HTTP_TASK_SCHEMA = (name = "http", overrides) => {
               (overrides == null ? void 0 : overrides.body) ? "body" : void 0
             ].filter(Boolean),
             properties: {
-              uri: {
+              uri: (_a = overrides == null ? void 0 : overrides.uri) != null ? _a : {
                 type: "string",
                 title: "URI"
               },
@@ -2376,7 +2311,7 @@ var WORKFLOW_HTTP_TASK_SCHEMA = (name = "http", overrides) => {
                 title: "Method",
                 enum: ["GET", "POST", "PATCH", "PUT", "DELETE"]
               },
-              headers: (_a = overrides == null ? void 0 : overrides.headers) != null ? _a : {
+              headers: (_b = overrides == null ? void 0 : overrides.headers) != null ? _b : {
                 type: "object",
                 title: "Headers",
                 properties: {},
@@ -2384,7 +2319,7 @@ var WORKFLOW_HTTP_TASK_SCHEMA = (name = "http", overrides) => {
                   type: "string"
                 }
               },
-              body: (_b = overrides == null ? void 0 : overrides.body) != null ? _b : {
+              body: (_c = overrides == null ? void 0 : overrides.body) != null ? _c : {
                 type: "object",
                 title: "Body",
                 properties: {},
@@ -2409,10 +2344,19 @@ var WORKFLOW_HTTP_TASK_SCHEMA = (name = "http", overrides) => {
 };
 var WORKFLOW_HTTP_TASK_INPUT_SCHEMA = (body, query) => ({
   type: "object",
-  required: [body ? "body" : void 0, query ? "query" : void 0].filter(
-    Boolean
-  ),
-  properties: __spreadValues(__spreadValues({}, query ? {
+  required: [
+    "uri",
+    body ? "body" : void 0,
+    query ? "query" : void 0
+  ].filter(Boolean),
+  properties: __spreadValues(__spreadValues({
+    uri: query ? {
+      type: "string",
+      queryParams: query
+    } : {
+      type: "string"
+    }
+  }, query ? {
     query
   } : {}), body ? {
     body
@@ -4972,7 +4916,7 @@ var webhookSpecs2 = {
       required: [],
       properties: {
         targetAgentId: {
-          type: "string",
+          $ref: "#/$defs/livechat_agent",
           title: "Target Agent email"
         }
       }
@@ -6335,12 +6279,9 @@ var mailchimpTaskConfigs = () => ({
     specification: {
       input: WORKFLOW_HTTP_TASK_INPUT_SCHEMA({
         type: "object",
-        required: ["list_id", "first_name", "last_name", "email"],
+        required: ["list_id", "email", "first_name", "last_name"],
         properties: {
           list_id: {
-            type: "string",
-            title: "Mailchimp audience ID",
-            description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
             $ref: "#/$defs/mailchimp_audience"
           },
           email: {
@@ -6392,9 +6333,6 @@ var mailchimpTaskConfigs = () => ({
             required: ["list_id"],
             properties: {
               list_id: {
-                type: "string",
-                title: "Mailchimp audience ID",
-                description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
                 $ref: "#/$defs/mailchimp_audience"
               }
             }
@@ -6428,10 +6366,7 @@ var mailchimpTaskConfigs = () => ({
         required: ["campaign_id"],
         properties: {
           campaign_id: {
-            type: "string",
-            title: "Campaign ID",
-            description: `The unique ID for the campaign. You'll find it by going to the Campaigns page in Mailchimp and selecting View Email from the drop-down list for the campaign. The URL indicates the campaign ID by the prefix "id=".`
-            // $ref: '#/$defs/mailchimp_campaign',
+            $ref: "#/$defs/mailchimp_campaign"
           }
         }
       }),
@@ -6457,12 +6392,9 @@ var mailchimpTaskConfigs = () => ({
     specification: {
       input: WORKFLOW_HTTP_TASK_INPUT_SCHEMA({
         type: "object",
-        required: ["list_id", "first_name", "last_name", "email"],
+        required: ["list_id", "email", "first_name", "last_name"],
         properties: {
           list_id: {
-            type: "string",
-            title: "Mailchimp audience ID",
-            description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
             $ref: "#/$defs/mailchimp_audience"
           },
           email: {
@@ -6506,12 +6438,9 @@ var mailchimpTaskConfigs = () => ({
     specification: {
       input: WORKFLOW_HTTP_TASK_INPUT_SCHEMA({
         type: "object",
-        required: ["list_id", "first_name", "last_name", "email"],
+        required: ["list_id", "email", "first_name", "last_name"],
         properties: {
           list_id: {
-            type: "string",
-            title: "Mailchimp audience ID",
-            description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
             $ref: "#/$defs/mailchimp_audience"
           },
           email: {
@@ -6558,9 +6487,6 @@ var mailchimpTaskConfigs = () => ({
         required: ["list_id", "email"],
         properties: {
           list_id: {
-            type: "string",
-            title: "Mailchimp audience ID",
-            description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
             $ref: "#/$defs/mailchimp_audience"
           },
           email: {
@@ -6594,9 +6520,6 @@ var mailchimpTaskConfigs = () => ({
         required: ["list_id", "email"],
         properties: {
           list_id: {
-            type: "string",
-            title: "Mailchimp audience ID",
-            description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
             $ref: "#/$defs/mailchimp_audience"
           },
           email: {
@@ -6630,9 +6553,6 @@ var mailchimpTaskConfigs = () => ({
         required: ["list_id", "email", "tag"],
         properties: {
           list_id: {
-            type: "string",
-            title: "Mailchimp audience ID",
-            description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
             $ref: "#/$defs/mailchimp_audience"
           },
           email: {
@@ -6671,9 +6591,6 @@ var mailchimpTaskConfigs = () => ({
         required: ["list_id", "email", "name"],
         properties: {
           list_id: {
-            type: "string",
-            title: "Mailchimp audience ID",
-            description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
             $ref: "#/$defs/mailchimp_audience"
           },
           email: {
@@ -6728,9 +6645,6 @@ var mailchimpTaskConfigs = () => ({
         required: ["list_id", "email", "note"],
         properties: {
           list_id: {
-            type: "string",
-            title: "Mailchimp audience ID",
-            description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
             $ref: "#/$defs/mailchimp_audience"
           },
           email: {
@@ -6769,9 +6683,6 @@ var mailchimpTaskConfigs = () => ({
         required: ["list_id", "email", "tag"],
         properties: {
           list_id: {
-            type: "string",
-            title: "Mailchimp audience ID",
-            description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
             $ref: "#/$defs/mailchimp_audience"
           },
           email: {
@@ -6809,9 +6720,6 @@ var mailchimpTaskConfigs = () => ({
         required: ["list_id", "email"],
         properties: {
           list_id: {
-            type: "string",
-            title: "Mailchimp audience ID",
-            description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
             $ref: "#/$defs/mailchimp_audience"
           },
           email: {
@@ -6875,9 +6783,6 @@ var mailchimpTaskConfigs = () => ({
         required: ["list_id", "email"],
         properties: {
           list_id: {
-            type: "string",
-            title: "Mailchimp audience ID",
-            description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
             $ref: "#/$defs/mailchimp_audience"
           },
           email: {
@@ -7051,10 +6956,8 @@ var mailchimpTaskConfigs = () => ({
         required: ["list_id", "query"],
         properties: {
           list_id: {
-            type: "string",
-            title: "Mailchimp audience ID",
-            description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
-            $ref: "#/$defs/mailchimp_audience"
+            $ref: "#/$defs/mailchimp_audience",
+            minLength: 1
           },
           query: {
             type: "string",
@@ -7228,10 +7131,7 @@ var mailchimpTaskConfigs = () => ({
         required: ["campaign_id"],
         properties: {
           campaign_id: {
-            type: "string",
-            title: "Campaign ID",
-            description: `The unique ID for the campaign. You'll find it by going to the Campaigns page in Mailchimp and selecting View Email from the drop-down list for the campaign. The URL indicates the campaign ID by the prefix "id=".`
-            //$ref: '#/$defs/mailchimp_campaign'
+            $ref: "#/$defs/mailchimp_campaign"
           }
         }
       }),
@@ -9463,7 +9363,7 @@ var WORKFLOW_SCHEMA_DEFS = {
           },
           ...Object.values(WorkflowSpecification.config.tasks).map(
             (config2) => {
-              var _a, _b;
+              var _a, _b, _c, _d;
               return {
                 if: {
                   properties: {
@@ -9472,7 +9372,8 @@ var WORKFLOW_SCHEMA_DEFS = {
                   }
                 },
                 then: WORKFLOW_HTTP_TASK_SCHEMA(config2.key, {
-                  body: (_b = (_a = config2.specification.input) == null ? void 0 : _a.properties) == null ? void 0 : _b.body
+                  uri: (_b = (_a = config2.specification.input) == null ? void 0 : _a.properties) == null ? void 0 : _b.uri,
+                  body: (_d = (_c = config2.specification.input) == null ? void 0 : _c.properties) == null ? void 0 : _d.body
                 })
               };
             }
@@ -9499,6 +9400,9 @@ var WORKFLOW_SCHEMA_DEFS = {
   }),
   $defs: {
     mailchimp_audience: {
+      type: "string",
+      title: "Mailchimp audience ID",
+      description: "The unique ID of your audience. <a href='https://mailchimp.com/help/find-audience-id/' target='_blank' rel='noreferrer nofollow'>Here's<a/> how to find it.",
       "x-ref": {
         provider: "mailchimp",
         product: "mailchimp",
@@ -9508,13 +9412,17 @@ var WORKFLOW_SCHEMA_DEFS = {
       }
     },
     mailchimp_campaign: {
-      "x-ref": {
-        provider: "mailchimp",
-        product: "mailchimp",
-        name: "campaign",
-        displayField: "name",
-        valueField: "id"
-      }
+      type: "string",
+      title: "Campaign ID",
+      description: `The unique ID for the campaign. You'll find it by going to the Campaigns page in Mailchimp and selecting View Email from the drop-down list for the campaign. The URL indicates the campaign ID by the prefix "id=".`
+      // TODO WD: it not ready yet, but WIP on BE side
+      // 'x-ref': {
+      //   provider: 'mailchimp',
+      //   product: 'mailchimp',
+      //   name: 'campaign',
+      //   displayField: 'name',
+      //   valueField: 'id'
+      // }
     },
     helpdesk_ticket: {
       title: "Ticket ID",
@@ -9546,7 +9454,7 @@ var WORKFLOW_SCHEMA_DEFS = {
         product: "helpdesk",
         name: "agent",
         displayField: "email",
-        valueField: "email"
+        valueField: "ID"
       }
     },
     livechat_chat_id: {
@@ -12657,8 +12565,8 @@ var getWorkflowTemplates = () => [
 ];
 
 // src/views/Workflows/Creator/Modals/AddTask/Modal.tsx
-import { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
-import { NavLink, useLocation, useNavigate as useNavigate3, useParams } from "react-router-dom";
+import { useEffect as useEffect5, useMemo as useMemo4, useState as useState5 } from "react";
+import { NavLink, useLocation as useLocation2, useNavigate as useNavigate4, useParams as useParams2 } from "react-router-dom";
 import {
   Button as Button2,
   DesignToken as DesignToken4,
@@ -13138,13 +13046,13 @@ var ProductIcon_default = ProductIcon;
 // src/views/Workflows/Creator/Provider/index.tsx
 import {
   createContext as createContext4,
-  useCallback as useCallback2,
+  useCallback as useCallback4,
   useContext as useContext6,
-  useEffect as useEffect3,
-  useRef as useRef2,
+  useEffect as useEffect4,
+  useRef as useRef3,
   useState as useState4
 } from "react";
-import { useNavigate as useNavigate2 } from "react-router-dom";
+import { useNavigate as useNavigate3 } from "react-router-dom";
 import { ReactFlowProvider, useReactFlow } from "reactflow";
 import debounce from "lodash.debounce";
 import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType12 } from "@livechat/developer-studio-api";
@@ -13384,15 +13292,36 @@ var DEFAULT_NODE_HEIGHT = {
   default: 65
 };
 
+// src/views/Workflows/Creator/Provider/navigation/hooks.ts
+import { useCallback, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useLocation, useNavigate as useNavigate2, useParams } from "react-router-dom";
+function useReplaceWorkflowIdInUrl() {
+  const navigate = useNavigate2();
+  const location = useLocation();
+  const { id } = useParams();
+  const latestPathRef = useRef2(location.pathname);
+  useEffect2(() => {
+    latestPathRef.current = location.pathname;
+  }, [location.pathname]);
+  return useCallback(
+    (newId) => {
+      if (!id) return;
+      const latestPath = latestPathRef.current.replace(`/${id}`, `/${newId}`);
+      navigate(latestPath, { replace: true });
+    },
+    [navigate, id]
+  );
+}
+
 // src/views/Workflows/Creator/Provider/state/data/hooks.ts
-import { useCallback, useEffect as useEffect2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
 function useWorkflowData(workflow) {
   const [actions, setActions] = useState3({});
   const [selection, setSelection] = useState3();
   const [pendingWorkflow, setPendingWorkflow] = useState3(
     () => JSON.parse(JSON.stringify(workflow))
   );
-  const setAction = useCallback(
+  const setAction = useCallback2(
     (action, value) => {
       setActions((prevState) => __spreadProps(__spreadValues({}, prevState), {
         [action]: value
@@ -13400,10 +13329,10 @@ function useWorkflowData(workflow) {
     },
     []
   );
-  useEffect2(() => {
+  useEffect3(() => {
     setPendingWorkflow(JSON.parse(JSON.stringify(workflow)));
     setSelection((prevState) => {
-      if ((prevState == null ? void 0 : prevState.kind) === "trigger") {
+      if ((prevState == null ? void 0 : prevState.kind) === "trigger" && !workflow.trigger.type) {
         return void 0;
       }
       if ((prevState == null ? void 0 : prevState.kind) === "task") {
@@ -13690,51 +13619,9 @@ var getWorkflowContexts = (workflow, external) => {
 };
 
 // src/views/Workflows/Creator/Provider/state/metadata/hooks.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { useFetchIntegrationCredentialsQuery } from "@livechat/platform-integrations";
 
-// src/hooks/user.ts
-import { useMutation as useMutation2, useQuery as useQuery3, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
-import { api as api3 } from "@livechat/developer-studio-api";
-var userQueryKeys = {
-  accounts: {
-    account: {
-      getInfo: ["accounts.account.getInfo"]
-    },
-    products: {
-      getOrganizationProducts: ["accounts.products.getOrganizationProducts"]
-    }
-  },
-  dps: {
-    getUser: ["dps.getUser"],
-    getUserIntegrations: ["dps.getUserIntegrations"]
-  }
-};
-var useFetchOrganizationProducts = () => {
-  var _b;
-  const _a = useQuery3(
-    userQueryKeys.accounts.products.getOrganizationProducts,
-    () => api3.platform.accounts.products.getOrganizationProducts()
-  ), { data, isLoading } = _a, rest = __objRest(_a, ["data", "isLoading"]);
-  return __spreadValues({ data: (_b = data == null ? void 0 : data.data) != null ? _b : [], isLoading }, rest);
-};
-var useUpdateOrganizationProducts = () => {
-  const queryClient = useQueryClient2();
-  const { mutateAsync: updateOrganizationProducts, isLoading } = useMutation2(
-    ({ productName }) => api3.platform.accounts.products.updateOrganizationProducts({
-      product: productName
-    }),
-    {
-      onSuccess: (_) => {
-        void queryClient.refetchQueries({
-          queryKey: userQueryKeys.accounts.products.getOrganizationProducts
-        });
-      }
-    }
-  );
-  return { updateOrganizationProducts, isLoading };
-};
-
 // src/views/Workflows/Creator/Provider/state/metadata/utils.ts
 import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType11 } from "@livechat/developer-studio-api";
 var flattenTasks = (tasks) => (Array.isArray(tasks) ? tasks : Object.values(tasks)).flatMap((task2) => {
@@ -13751,17 +13638,61 @@ var flattenTasks = (tasks) => (Array.isArray(tasks) ? tasks : Object.values(task
 });
 
 // src/views/Workflows/Creator/Provider/state/metadata/validation/utils.ts
-import Ajv from "ajv";
+import Ajv, { _ } from "ajv";
 import AjvWithErrors from "ajv-errors";
 import { IntegrationNames as IntegrationNames12 } from "@livechat/developer-studio-api";
-var ajv = AjvWithErrors(
+var keywords = {
+  urlWithQueryParams: {
+    keyword: "queryParams",
+    type: "string",
+    schemaType: "object",
+    metaSchema: {
+      type: "object",
+      properties: {
+        queryParams: {
+          type: "object"
+        }
+      }
+    },
+    error: {
+      message: () => `This field cannot be empty`,
+      params: (cxt) => _`{ param: ${cxt.params.param} }`
+    },
+    code(cxt) {
+      const { data, schema } = cxt;
+      cxt.gen.if(
+        _`typeof ${data} === "string" && ${data}.includes("?")`,
+        () => {
+          const params = _`Object.fromEntries(new URL(${data}).searchParams.entries())`;
+          for (const param of Object.keys(schema.properties || {})) {
+            cxt.gen.if(
+              _`!(${param} in ${params}) || ${params}[${param}].length <= 0`,
+              () => {
+                cxt.error(
+                  true,
+                  { param },
+                  {
+                    instancePath: param
+                  }
+                );
+              }
+            );
+          }
+        },
+        () => {
+          cxt.error(true, { param: "URL" });
+        }
+      );
+    }
+  }
+};
+var getValidator = () => AjvWithErrors(
   new Ajv({
     strict: false,
     allErrors: true
-  })
-);
-var validateSchema = (workflow, frames) => {
-  const validate = ajv.compile(WORKFLOW_SCHEMA());
+  }).addKeyword(keywords.urlWithQueryParams)
+).compile(WORKFLOW_SCHEMA());
+var validateSchema = (workflow, frames, validateFunction) => {
   const resolved = __spreadProps(__spreadValues({}, workflow), {
     definition: __spreadProps(__spreadValues({}, workflow.definition), {
       tasks: workflow.definition.tasks.map(
@@ -13782,8 +13713,8 @@ var validateSchema = (workflow, frames) => {
       }
     )
   });
-  validate(resolved);
-  return validate.errors || [];
+  validateFunction(resolved);
+  return validateFunction.errors || [];
 };
 var validateTasks = (workflow, frames, products) => {
   function taskCompiler(task2, baseInstancePath) {
@@ -14093,11 +14024,11 @@ function flattenErrorSchema(workflow, schema) {
     }).filter(([, value]) => Boolean(value))
   );
 }
-var getWorkflowValidation = (workflow, internal, external) => {
+var getWorkflowValidation = (workflow, internal, external, validator3) => {
   const rawErrors = [
     ...validateTrigger(workflow, internal.frames, external.products),
     ...validateTasks(workflow, internal.frames, external.products),
-    ...validateSchema(workflow, internal.frames)
+    ...validateSchema(workflow, internal.frames, validator3)
   ].filter(
     (rawError) => Boolean(rawError)
   ).map((rawError) => {
@@ -14151,11 +14082,74 @@ var getWorkflowValidation = (workflow, internal, external) => {
   };
 };
 
+// src/views/Workflows/Creator/Provider/state/metadata/validation/hooks.ts
+import { useCallback as useCallback3, useMemo as useMemo2 } from "react";
+
+// src/hooks/user.ts
+import { useMutation as useMutation2, useQuery as useQuery3, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import { api as api3 } from "@livechat/developer-studio-api";
+var userQueryKeys = {
+  accounts: {
+    account: {
+      getInfo: ["accounts.account.getInfo"]
+    },
+    products: {
+      getOrganizationProducts: ["accounts.products.getOrganizationProducts"]
+    }
+  },
+  dps: {
+    getUser: ["dps.getUser"],
+    getUserIntegrations: ["dps.getUserIntegrations"]
+  }
+};
+var useFetchOrganizationProducts = () => {
+  var _b;
+  const _a = useQuery3(
+    userQueryKeys.accounts.products.getOrganizationProducts,
+    () => api3.platform.accounts.products.getOrganizationProducts()
+  ), { data, isLoading } = _a, rest = __objRest(_a, ["data", "isLoading"]);
+  return __spreadValues({ data: (_b = data == null ? void 0 : data.data) != null ? _b : [], isLoading }, rest);
+};
+var useUpdateOrganizationProducts = () => {
+  const queryClient = useQueryClient2();
+  const { mutateAsync: updateOrganizationProducts, isLoading } = useMutation2(
+    ({ productName }) => api3.platform.accounts.products.updateOrganizationProducts({
+      product: productName
+    }),
+    {
+      onSuccess: (_2) => {
+        void queryClient.refetchQueries({
+          queryKey: userQueryKeys.accounts.products.getOrganizationProducts
+        });
+      }
+    }
+  );
+  return { updateOrganizationProducts, isLoading };
+};
+
+// src/views/Workflows/Creator/Provider/state/metadata/validation/hooks.ts
+function useWorkflowValidator() {
+  const organizationProducts = useFetchOrganizationProducts();
+  const validator3 = useMemo2(getValidator, []);
+  const validate = useCallback3(
+    (workflow, internal) => getWorkflowValidation(
+      workflow,
+      internal,
+      {
+        products: organizationProducts.data
+      },
+      validator3
+    ),
+    [validator3, organizationProducts.data]
+  );
+  return validate;
+}
+
 // src/views/Workflows/Creator/Provider/state/metadata/hooks.ts
 function useWorkflowMetadata(workflow) {
   const credentialsQuery = useFetchIntegrationCredentialsQuery();
-  const organizationProducts = useFetchOrganizationProducts();
-  const metadata = useMemo2(() => {
+  const validator3 = useWorkflowValidator();
+  const metadata = useMemo3(() => {
     var _a;
     const elements = {
       trigger: workflow.trigger,
@@ -14169,19 +14163,13 @@ function useWorkflowMetadata(workflow) {
     const frames = getWorkflowContexts(workflow, {
       credentials: (_a = credentialsQuery.data) != null ? _a : []
     });
-    const validation = getWorkflowValidation(
-      workflow,
-      { frames },
-      {
-        products: organizationProducts.data
-      }
-    );
+    const validation = validator3(workflow, { frames });
     return {
       elements,
       frames,
       validation
     };
-  }, [workflow, credentialsQuery.data, organizationProducts.data]);
+  }, [validator3, workflow, credentialsQuery.data]);
   return {
     metadata
   };
@@ -14278,8 +14266,9 @@ function WorkflowCreatorProviderBase({
 }) {
   var _a, _b;
   const { fitView } = useReactFlow();
-  const navigate = useNavigate2();
+  const navigate = useNavigate3();
   const notifications = useNotificationContext2();
+  const replaceWorkflowId = useReplaceWorkflowIdInUrl();
   const createWorkflowAction = useCreateWorkflow();
   const createWorkflowDraftAction = useCreateWorkflowDraft();
   const updateWorkflowAction = useUpdateWorkflow();
@@ -14290,22 +14279,22 @@ function WorkflowCreatorProviderBase({
     state,
     updaters: { setWorkflow, setAction, setSelection }
   } = useWorkflowState(workflow, options);
-  const autosaveStateRef = useRef2(state);
-  const autosaveWorkflowRef = useRef2(
+  const autosaveStateRef = useRef3(state);
+  const autosaveWorkflowRef = useRef3(
     debounce(() => __async(this, null, function* () {
       yield save(true);
     }), 500)
   );
   const autosaveWorkflow = autosaveWorkflowRef.current;
-  useEffect3(() => {
+  useEffect4(() => {
     return () => {
       autosaveWorkflow.cancel();
     };
   }, [autosaveWorkflow]);
-  useEffect3(() => {
+  useEffect4(() => {
     autosaveStateRef.current = state;
   }, [state]);
-  const focus = useCallback2(
+  const focus = useCallback4(
     (identifier2) => {
       setTimeout(
         () => fitView(
@@ -14326,7 +14315,7 @@ function WorkflowCreatorProviderBase({
     },
     [fitView]
   );
-  const toggle = useCallback2(
+  const toggle = useCallback4(
     (params) => {
       setTimeout(() => {
         setSelection(() => {
@@ -14350,7 +14339,7 @@ function WorkflowCreatorProviderBase({
     },
     [focus, setSelection]
   );
-  const validate = useCallback2(() => {
+  const validate = useCallback4(() => {
     var _a2;
     const state2 = autosaveStateRef.current;
     if (((_a2 = options == null ? void 0 : options.validation) == null ? void 0 : _a2.strategy) !== "non-blocking" && !state2.metadata.validation.isValid) {
@@ -14381,21 +14370,21 @@ function WorkflowCreatorProviderBase({
     }
     return true;
   }, [(_a = options == null ? void 0 : options.validation) == null ? void 0 : _a.strategy, toggle]);
-  const replaceWorkflow = useCallback2(
+  const replaceWorkflow = useCallback4(
     (workflow2) => {
       setWorkflow(workflow2);
       void autosaveWorkflowRef.current();
     },
     [autosaveWorkflowRef, setWorkflow]
   );
-  const changeWorkflow = useCallback2(
+  const changeWorkflow = useCallback4(
     (change) => {
       setWorkflow((prevState) => applyChange(prevState, change(prevState)));
       void autosaveWorkflowRef.current();
     },
     [autosaveWorkflowRef, setWorkflow]
   );
-  const goToAddTrigger = useCallback2(() => {
+  const goToAddTrigger = useCallback4(() => {
     navigate(
       `${basePath}/trigger/${OTHER_TYPES.SYSTEM}/${"manual" /* Manual */}`,
       {
@@ -14405,7 +14394,7 @@ function WorkflowCreatorProviderBase({
       }
     );
   }, [basePath, navigate]);
-  const addTrigger = useCallback2(
+  const addTrigger = useCallback4(
     (trigger) => {
       changeWorkflow(() => ({
         trigger
@@ -14419,7 +14408,7 @@ function WorkflowCreatorProviderBase({
     },
     [changeWorkflow, toggle]
   );
-  const updateTrigger = useCallback2(
+  const updateTrigger = useCallback4(
     (trigger) => {
       changeWorkflow(() => ({
         trigger
@@ -14427,7 +14416,7 @@ function WorkflowCreatorProviderBase({
     },
     [changeWorkflow]
   );
-  const removeTrigger = useCallback2(() => {
+  const removeTrigger = useCallback4(() => {
     var _a2;
     const state2 = autosaveStateRef.current;
     replaceWorkflow(__spreadProps(__spreadValues({}, state2.workflow), {
@@ -14437,7 +14426,7 @@ function WorkflowCreatorProviderBase({
       toggle();
     }
   }, [replaceWorkflow, toggle]);
-  const goToAddTask = useCallback2(
+  const goToAddTask = useCallback4(
     (taskReference, parentTaskReference) => {
       navigate(`${basePath}/add`, {
         state: {
@@ -14449,7 +14438,7 @@ function WorkflowCreatorProviderBase({
     },
     [state.metadata.frames, navigate, basePath]
   );
-  const addTask = useCallback2(
+  const addTask = useCallback4(
     (task2, targetTaskReference, parentTaskReference) => {
       var _a2;
       const existingTasks = Object.values(state.metadata.elements.tasks).filter((x) => x.taskReferenceName.includes(task2.taskReferenceName)).sort((a, b) => {
@@ -14558,7 +14547,7 @@ function WorkflowCreatorProviderBase({
     },
     [state.workflow.definition.tasks, changeWorkflow, toggle]
   );
-  const updateTask = useCallback2(
+  const updateTask = useCallback4(
     (targetTaskReferenceName, targetTask) => {
       changeWorkflow((workflow2) => ({
         definition: {
@@ -14575,7 +14564,7 @@ function WorkflowCreatorProviderBase({
     },
     [changeWorkflow]
   );
-  const removeTask = useCallback2(
+  const removeTask = useCallback4(
     (targetTaskReferenceName) => {
       var _a2;
       changeWorkflow((workflow2) => ({
@@ -14596,7 +14585,7 @@ function WorkflowCreatorProviderBase({
     },
     [(_b = state.selection) == null ? void 0 : _b.id, changeWorkflow, toggle]
   );
-  const save = useCallback2(
+  const save = useCallback4(
     (silent) => __async(this, null, function* () {
       const state2 = autosaveStateRef.current;
       if (!state2.workflow.draft && !validate()) {
@@ -14625,7 +14614,7 @@ function WorkflowCreatorProviderBase({
               "Workflow has been created successfully"
             );
           }
-          navigate(`/workflow/${workflowId}`);
+          replaceWorkflowId(workflowId);
         }
       } finally {
         setAction("isSaving", false);
@@ -14635,13 +14624,13 @@ function WorkflowCreatorProviderBase({
       createWorkflowAction,
       updateWorkflowAction,
       notifications,
+      replaceWorkflowId,
       validate,
-      navigate,
       setWorkflow,
       setAction
     ]
   );
-  const activate = useCallback2(() => __async(this, null, function* () {
+  const activate = useCallback4(() => __async(this, null, function* () {
     const state2 = autosaveStateRef.current;
     if (state2.workflow.draft) {
       return;
@@ -14665,7 +14654,7 @@ function WorkflowCreatorProviderBase({
       setAction("isActivating", false);
     }
   }), [activateWorkflowAction, notifications, validate, setWorkflow, setAction]);
-  const remove = useCallback2(() => __async(this, null, function* () {
+  const remove = useCallback4(() => __async(this, null, function* () {
     const state2 = autosaveStateRef.current;
     setAction("isRemoving", true);
     try {
@@ -14684,7 +14673,7 @@ function WorkflowCreatorProviderBase({
       setAction("isRemoving", false);
     }
   }), [setAction, navigate, notifications, deleteWorkflowAction]);
-  const createDraft = useCallback2(
+  const createDraft = useCallback4(
     (options2) => __async(this, null, function* () {
       const state2 = autosaveStateRef.current;
       if (state2.workflow.draft) {
@@ -14722,7 +14711,7 @@ function WorkflowCreatorProviderBase({
       setAction
     ]
   );
-  const publishDraft = useCallback2(
+  const publishDraft = useCallback4(
     (options2) => __async(this, null, function* () {
       var _a2;
       const state2 = autosaveStateRef.current;
@@ -14767,7 +14756,7 @@ function WorkflowCreatorProviderBase({
       createWorkflowAction
     ]
   );
-  const discardDraft = useCallback2(() => __async(this, null, function* () {
+  const discardDraft = useCallback4(() => __async(this, null, function* () {
     const state2 = autosaveStateRef.current;
     setAction("isDiscarding", true);
     try {
@@ -14874,7 +14863,16 @@ var itemOptionCss = (active) => css`
 `;
 function ItemOption({ option, onClick, active }) {
   return /* @__PURE__ */ jsx4("div", { css: itemOptionCss(active), onClick, children: /* @__PURE__ */ jsxs2(Column2, { setColumnPadding: "0", width: 6, children: [
-    /* @__PURE__ */ jsx4(Text2, { noMargin: true, children: option.name }),
+    /* @__PURE__ */ jsx4(
+      Text2,
+      {
+        noMargin: true,
+        "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.modals.addTask.taskCard(
+          option.key
+        ),
+        children: option.name
+      }
+    ),
     /* @__PURE__ */ jsx4(
       Text2,
       {
@@ -14937,11 +14935,11 @@ var Options_default = AddWorkflowTaskOptions;
 function AddWorkflowTaskModal({ basePath, onClose }) {
   var _a;
   const [search, setSearch] = useState5("");
-  const location = useLocation();
-  const navigate = useNavigate3();
-  const params = useParams();
+  const location = useLocation2();
+  const navigate = useNavigate4();
+  const params = useParams2();
   const [state, setState] = useState5();
-  const config2 = useMemo3(
+  const config2 = useMemo4(
     () => [
       // {
       //   name: "system",
@@ -15101,7 +15099,7 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
   const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
     user == null ? void 0 : user.meta.email
   );
-  useEffect4(() => {
+  useEffect5(() => {
     var _a2, _b, _c, _d, _e, _f, _g;
     if (!params.task) {
       const service = (_a2 = params.service) != null ? _a2 : "livechat";
@@ -15181,12 +15179,14 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
               handleAddTask(state == null ? void 0 : state.task);
             },
             size: "medium",
+            "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.modals.addTask.saveButton,
             children: "Add task"
           }
         )
       ] }),
       heading: /* @__PURE__ */ jsx4(ModalHeader, { title: "Add task" }),
       onClose,
+      "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.modals.addTask.wrapper,
       children: /* @__PURE__ */ jsxs2(Row2, { notPadded: true, children: [
         /* @__PURE__ */ jsxs2(
           Column3,
@@ -15275,7 +15275,16 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
                           end: false,
                           state: location.state,
                           to: `${basePath}/${name}`,
-                          children: /* @__PURE__ */ jsx4(Text3, { size: "md", children: displayName })
+                          children: /* @__PURE__ */ jsx4(
+                            Text3,
+                            {
+                              size: "md",
+                              "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.modals.addTask.taskCategoryButton(
+                                name
+                              ),
+                              children: displayName
+                            }
+                          )
                         }
                       )
                     ]
@@ -15328,8 +15337,8 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
 var Modal_default = AddWorkflowTaskModal;
 
 // src/views/Workflows/Creator/Modals/AddTrigger/Modal.tsx
-import { useEffect as useEffect5, useMemo as useMemo4, useState as useState6 } from "react";
-import { NavLink as NavLink2, useLocation as useLocation2, useNavigate as useNavigate4, useParams as useParams2 } from "react-router-dom";
+import { useEffect as useEffect6, useMemo as useMemo5, useState as useState6 } from "react";
+import { NavLink as NavLink2, useLocation as useLocation3, useNavigate as useNavigate5, useParams as useParams3 } from "react-router-dom";
 import {
   Button as Button3,
   DesignToken as DesignToken6,
@@ -15380,7 +15389,17 @@ var itemOptionCss2 = (active) => css`
 `;
 function ItemOption2({ option, onClick, active }) {
   return /* @__PURE__ */ jsx4("div", { css: itemOptionCss2(active), onClick, children: /* @__PURE__ */ jsxs2(Column4, { setColumnPadding: "0", width: 6, children: [
-    /* @__PURE__ */ jsx4(Text4, { bold: true, noMargin: true, children: option.name }),
+    /* @__PURE__ */ jsx4(
+      Text4,
+      {
+        bold: true,
+        noMargin: true,
+        "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.modals.addTrigger.triggerCard(
+          option.key
+        ),
+        children: option.name
+      }
+    ),
     /* @__PURE__ */ jsx4(
       Text4,
       {
@@ -15445,7 +15464,7 @@ function AddWorkflowTriggerModal({
   onClose
 }) {
   const [search, setSearch] = useState6("");
-  const config2 = useMemo4(
+  const config2 = useMemo5(
     () => [
       {
         name: OTHER_TYPES.SYSTEM,
@@ -15571,16 +15590,16 @@ function AddWorkflowTriggerModal({
     ],
     []
   );
-  const location = useLocation2();
-  const navigate = useNavigate4();
-  const params = useParams2();
+  const location = useLocation3();
+  const navigate = useNavigate5();
+  const params = useParams3();
   const [state, setState] = useState6();
   const { addTrigger } = useWorkflowCreator();
   const { user } = useUserContext4();
   const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
     user == null ? void 0 : user.meta.email
   );
-  useEffect5(() => {
+  useEffect6(() => {
     var _a, _b;
     if (!params.trigger) {
       const firstTrigger = (_b = (_a = config2.find((el) => el.name === params.service)) == null ? void 0 : _a.values.sort((a, b) => a.name.localeCompare(b.name))[0]) == null ? void 0 : _b.key;
@@ -15619,12 +15638,14 @@ function AddWorkflowTriggerModal({
               handleAddTrigger(state == null ? void 0 : state.trigger);
             },
             size: "medium",
+            "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.modals.addTrigger.saveButton,
             children: "Add trigger"
           }
         )
       ] }),
       heading: /* @__PURE__ */ jsx4(ModalHeader2, { title: "Add trigger" }),
       onClose,
+      "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.modals.addTrigger.wrapper,
       children: /* @__PURE__ */ jsxs2(Row3, { notPadded: true, children: [
         /* @__PURE__ */ jsxs2(
           Column5,
@@ -15713,7 +15734,16 @@ function AddWorkflowTriggerModal({
                           end: false,
                           state: location.state,
                           to: `${basePath}/${name}`,
-                          children: /* @__PURE__ */ jsx4(Text5, { size: "md", children: displayName })
+                          children: /* @__PURE__ */ jsx4(
+                            Text5,
+                            {
+                              size: "md",
+                              "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.modals.addTrigger.triggerCategoryButton(
+                                name
+                              ),
+                              children: displayName
+                            }
+                          )
                         }
                       )
                     ]
@@ -15840,7 +15870,7 @@ function DeleteWorkflowModal({
 }
 
 // src/views/Workflows/Creator/Modals/Edit/Modal.tsx
-import { useNavigate as useNavigate5 } from "react-router-dom";
+import { useNavigate as useNavigate6 } from "react-router-dom";
 import { Error as Error3 } from "@livechat/design-system-icons";
 import {
   Button as Button5,
@@ -15854,7 +15884,7 @@ import {
 } from "@livechat/developer-studio-ui-react";
 import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function EditWorkflowModal({ onClose }) {
-  const navigate = useNavigate5();
+  const navigate = useNavigate6();
   const {
     state: {
       workflow,
@@ -15911,7 +15941,7 @@ function EditWorkflowModal({ onClose }) {
 }
 
 // src/views/Workflows/Creator/Modals/Execute/Modal.tsx
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback5 } from "react";
 import { Field, Form } from "react-final-form";
 import validator from "validator";
 import {
@@ -15929,7 +15959,7 @@ function ExecuteWorkflowModal({
   onClose
 }) {
   const executeMutation = useExecuteWorkflow();
-  const onSubmit = useCallback3(
+  const onSubmit = useCallback5(
     (data) => __async(this, null, function* () {
       yield executeMutation.mutateAsync({
         workflow,
@@ -16011,8 +16041,8 @@ function ExecuteWorkflowModal({
 var Modal_default3 = ExecuteWorkflowModal;
 
 // src/views/Workflows/Creator/Modals/Preview/Modal.tsx
-import { useCallback as useCallback13 } from "react";
-import { useNavigate as useNavigate9 } from "react-router-dom";
+import { useCallback as useCallback16 } from "react";
+import { useNavigate as useNavigate10 } from "react-router-dom";
 
 // ../../../node_modules/.pnpm/@emotion+styled@11.14.0_@emotion+react@11.14.0_@types+react@18.3.18_react@18.3.1__@types+react@18.3.18_react@18.3.1/node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js
 import * as React4 from "react";
@@ -16322,7 +16352,7 @@ import {
 import { Row as Row11 } from "@livechat/developer-studio-ui-react";
 
 // src/views/Workflows/Creator/Builder/Diagram.tsx
-import { useCallback as useCallback12, useEffect as useEffect17 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect18 } from "react";
 import ReactFlow, {
   addEdge,
   Background,
@@ -16362,6 +16392,7 @@ function AddTaskNode(node2) {
             node2.data.parentTaskReference
           );
         },
+        "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.builder.nodes.add.task.button,
         children: workflow.definition.tasks.length > 0 ? "" : "Add task"
       }
     ),
@@ -16388,6 +16419,7 @@ function AddTriggerNode(node2) {
         onClick: () => {
           goToAddTrigger();
         },
+        "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.builder.nodes.add.trigger.button,
         children: "Add trigger"
       }
     ),
@@ -16495,7 +16527,7 @@ import SchemaForm from "@rjsf/core";
 import validator2 from "@rjsf/validator-ajv8";
 
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Fields/CustomString/Field.tsx
-import { useEffect as useEffect9, useMemo as useMemo6, useState as useState12 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect10, useMemo as useMemo7, useState as useState12 } from "react";
 import { getDefaultRegistry } from "@rjsf/core";
 import { MoreHoriz } from "@livechat/design-system-icons";
 import {
@@ -16509,7 +16541,7 @@ import { Intro as Intro2, Row as Row7 } from "@livechat/developer-studio-ui-reac
 import { useFetchIntegrationResourceQuery } from "@livechat/platform-integrations";
 
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Fields/CustomTags/Field.tsx
-import { useRef as useRef5, useState as useState10 } from "react";
+import { useRef as useRef6, useState as useState10 } from "react";
 import { useOnClickOutside } from "@livechat/developer-studio-ui-react";
 
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Fields/CustomTags/TagsPicker/Picker.tsx
@@ -16952,7 +16984,7 @@ function CustomTagsPicker({
 }
 
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Fields/CustomTags/TagsInput/Input.tsx
-import { useCallback as useCallback6, useEffect as useEffect7, useRef as useRef4 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef5 } from "react";
 import debounce3 from "lodash.debounce";
 import { Tooltip as Tooltip3 } from "@livechat/design-system-react-components";
 
@@ -17003,7 +17035,7 @@ function CustomTagTemplate(tagData, { settings: _s }) {
 }
 
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Fields/CustomTags/TagsInput/Tag/Tooltip.tsx
-import { useCallback as useCallback4, useState as useState9 } from "react";
+import { useCallback as useCallback6, useState as useState9 } from "react";
 import debounce2 from "lodash.debounce";
 import {
   DesignToken as DesignToken10,
@@ -17022,8 +17054,8 @@ var useCustomTagsInputTagTooltipData = () => {
       visible: false
     }
   );
-  const setTooltipDataDebounced = useCallback4(debounce2(setTooltipData, 50), []);
-  const showTagTooltip = useCallback4(
+  const setTooltipDataDebounced = useCallback6(debounce2(setTooltipData, 50), []);
+  const showTagTooltip = useCallback6(
     (tag, tagElement) => {
       const rect = tagElement.getBoundingClientRect();
       const tooltipPosition = {
@@ -17038,7 +17070,7 @@ var useCustomTagsInputTagTooltipData = () => {
     },
     [setTooltipDataDebounced]
   );
-  const hideTagTooltip = useCallback4(() => {
+  const hideTagTooltip = useCallback6(() => {
     setTooltipDataDebounced({
       visible: false
     });
@@ -17107,10 +17139,10 @@ function CustomTagsInputTagTooltip({
 }
 
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Fields/CustomTags/TagsInput/Tags.tsx
-import { memo as memo3, useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef3 } from "react";
+import { memo as memo3, useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo6, useRef as useRef4 } from "react";
 import Tagify from "@yaireo/tagify";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var noop = (_) => _;
+var noop = (_2) => _2;
 var isSameDeep = (a, b) => {
   const trans = (x) => typeof x === "string" ? x : JSON.stringify(x);
   return trans(a) === trans(b);
@@ -17191,12 +17223,12 @@ function TagifyWrapper({
   defaultValue,
   showDropdown
 }) {
-  const mountedRef = useRef3();
-  const inputElmRef = useRef3(null);
-  const tagify = useRef3();
-  const lastClassNameRef = useRef3();
+  const mountedRef = useRef4();
+  const inputElmRef = useRef4(null);
+  const tagify = useRef4();
+  const lastClassNameRef = useRef4();
   const _value = defaultValue || value;
-  const inputAttrs = useMemo5(
+  const inputAttrs = useMemo6(
     () => ({
       ref: inputElmRef,
       name,
@@ -17209,10 +17241,10 @@ function TagifyWrapper({
     }),
     []
   );
-  const setFocus = useCallback5(() => {
+  const setFocus = useCallback7(() => {
     autoFocus && tagify.current.DOM.input.focus();
   }, [tagify]);
-  useEffect6(() => {
+  useEffect7(() => {
     templatesToString(settings2.templates);
     settings2.userInput = userInput;
     if (InputMode === "textarea") settings2.mode = "mix";
@@ -17230,70 +17262,70 @@ function TagifyWrapper({
       t.destroy();
     };
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("change").on("change", onChange);
   }, [onChange]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("input").on("input", onInput);
   }, [onInput]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("add").on("add", onAdd);
   }, [onAdd]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("remove").on("remove", onRemove);
   }, [onRemove]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("invalid").on("invalid", onInvalid);
   }, [onInvalid]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("keydown").on("keydown", onKeydown);
   }, [onKeydown]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("focus").on("focus", onFocus);
   }, [onFocus]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("blur").on("blur", onBlur);
   }, [onBlur]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("click").on("click", onClick);
   }, [onClick]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("edit:input").on("edit:input", onEditInput);
   }, [onEditInput]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("edit:beforeUpdate").on("edit:beforeUpdate", onEditBeforeUpdate);
   }, [onEditBeforeUpdate]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("edit:updated").on("edit:updated", onEditUpdated);
   }, [onEditUpdated]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("edit:start").on("edit:start", onEditStart);
   }, [onEditStart]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("edit:keydown").on("edit:keydown", onEditKeydown);
   }, [onEditKeydown]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("dropdown:show").on("dropdown:show", onDropdownShow);
   }, [onDropdownShow]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("dropdown:hide").on("dropdown:hide", onDropdownHide);
   }, [onDropdownHide]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("dropdown:select").on("dropdown:select", onDropdownSelect);
   }, [onDropdownSelect]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("dropdown:scroll").on("dropdown:scroll", onDropdownScroll);
   }, [onDropdownScroll]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("dropdown:noMatch").on("dropdown:noMatch", onDropdownNoMatch);
   }, [onDropdownNoMatch]);
-  useEffect6(() => {
+  useEffect7(() => {
     tagify.current.off("dropdown:updated").on("dropdown:updated", onDropdownUpdated);
   }, [onDropdownUpdated]);
-  useEffect6(() => {
+  useEffect7(() => {
     setFocus();
   }, [autoFocus]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (mountedRef.current) {
       tagify.current.settings.whitelist.length = 0;
       (whitelist == null ? void 0 : whitelist.length) && tagify.current.settings.whitelist.push(
@@ -17301,13 +17333,13 @@ function TagifyWrapper({
       );
     }
   }, [whitelist]);
-  useEffect6(() => {
+  useEffect7(() => {
     const currentValue = tagify.current.getInputValue();
     if (mountedRef.current && !isSameDeep(value, currentValue)) {
       tagify.current.loadOriginalValues(value);
     }
   }, [value]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (mountedRef.current) {
       const { added, removed } = compareStrings(
         lastClassNameRef.current,
@@ -17322,33 +17354,33 @@ function TagifyWrapper({
     }
     lastClassNameRef.current = className;
   }, [className]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (mountedRef.current) {
       tagify.current.loading(loading);
     }
   }, [loading]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (mountedRef.current) {
       tagify.current.setReadonly(readOnly != null ? readOnly : false);
     }
   }, [readOnly]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (mountedRef.current) {
       tagify.current.setDisabled(disabled != null ? disabled : false);
     }
   }, [disabled]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (mountedRef.current) {
       const current = tagify.current;
       current.userInput = userInput;
     }
   }, [userInput]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (mountedRef.current) {
       tagify.current.setPlaceholder(placeholder2);
     }
   }, [placeholder2]);
-  useEffect6(() => {
+  useEffect7(() => {
     const t = tagify.current;
     if (mountedRef.current) {
       if (showDropdown) {
@@ -17359,7 +17391,7 @@ function TagifyWrapper({
       }
     }
   }, [showDropdown]);
-  useEffect6(() => {
+  useEffect7(() => {
     mountedRef.current = true;
   }, []);
   return (
@@ -17471,23 +17503,23 @@ function CustomTagsInput({
   renderPicker,
   renderPickerTrigger
 }) {
-  const tagifyRef = useRef4();
+  const tagifyRef = useRef5();
   const [tooltipData, { showTagTooltip, hideTagTooltip }] = useCustomTagsInputTagTooltipData();
-  const updateAllIcons = useCallback6(() => {
+  const updateAllIcons = useCallback8(() => {
     const tagify = tagifyRef.current;
     if (!tagify) {
       return;
     }
     tagify.value.forEach(updateCustomTagsInputTagIcon);
   }, []);
-  const getCurrentValue = useCallback6(() => {
+  const getCurrentValue = useCallback8(() => {
     const tagify = tagifyRef.current;
     if (!tagify) {
       return "";
     }
     return tagify.getMixedTagsAsString().replace(trim2 ? /\s+/g : /\r\n$/, "").replaceAll("[[", "${").replaceAll("]]", "}").replaceAll("\u200B", "").replaceAll("\xA0", "");
   }, [trim2]);
-  const setCurrentValue = useCallback6(
+  const setCurrentValue = useCallback8(
     (value2, frame) => {
       const tagify = tagifyRef.current;
       if (!tagify) {
@@ -17498,14 +17530,14 @@ function CustomTagsInput({
     },
     [updateAllIcons]
   );
-  const handleChange = useCallback6(
+  const handleChange = useCallback8(
     debounce3(() => {
       onChange(getCurrentValue());
       updateAllIcons();
     }, 300),
     [onChange, getCurrentValue, updateAllIcons]
   );
-  const handleKeyDown = useCallback6(
+  const handleKeyDown = useCallback8(
     (e) => {
       if (e.detail.event.key !== "Backspace") {
         return;
@@ -17516,7 +17548,7 @@ function CustomTagsInput({
     },
     [handleChange]
   );
-  const addTag = useCallback6(
+  const addTag = useCallback8(
     (tag) => {
       const tagify = tagifyRef.current;
       if (!tagify) {
@@ -17532,7 +17564,7 @@ function CustomTagsInput({
     },
     [trim2, onPickerToggle]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     const tagify = tagifyRef.current;
     if (!tagify) {
       return;
@@ -17558,7 +17590,7 @@ function CustomTagsInput({
     showTagTooltip,
     hideTagTooltip
   ]);
-  useEffect7(() => {
+  useEffect8(() => {
     const tagify = tagifyRef.current;
     if (!tagify) {
       return;
@@ -17609,9 +17641,7 @@ function CustomTagsInput({
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Fields/CustomTags/TagsPicker/Trigger.tsx
 import { Add as Add4 } from "@livechat/design-system-icons";
 import { Button as Button10, Icon as Icon8 } from "@livechat/design-system-react-components";
-function CustomTagsPickerTrigger({
-  onClick
-}) {
+function CustomTagsPickerTrigger({ onClick }) {
   return /* @__PURE__ */ jsx4(
     Button10,
     {
@@ -17624,7 +17654,6 @@ function CustomTagsPickerTrigger({
         min-height: 28px;
         width: 28px;
         min-width: 28px;
-        z-index: 1000;
       `,
       icon: /* @__PURE__ */ jsx4(Icon8, { source: Add4 }),
       kind: "plain",
@@ -17646,7 +17675,7 @@ function CustomTagsField({
   wrapperCss: wrapperCss3,
   onChange
 }) {
-  const wrapperRef = useRef5(null);
+  const wrapperRef = useRef6(null);
   const [isPickerVisible, setIsPickerVisible] = useState10(false);
   useOnClickOutside(wrapperRef, () => {
     setIsPickerVisible(false);
@@ -17714,7 +17743,7 @@ function DynamicCustomStringField(props) {
 }
 
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Fields/CustomString/Modes/Predefined.tsx
-import { useEffect as useEffect8, useState as useState11 } from "react";
+import { useEffect as useEffect9, useState as useState11 } from "react";
 import { DesignToken as DesignToken11, Picker } from "@livechat/design-system-react-components";
 var pickerCustomStyles = (readonly) => css`
   flex: 1;
@@ -17729,11 +17758,11 @@ function PredefinedCustomStringField(props) {
   const { resourceQuery, onChange, schema } = props;
   const resourceConfig = schema["x-ref"];
   const [pickerOptions, setPickerOptions] = useState11([]);
-  useEffect8(() => {
+  useEffect9(() => {
     var _a2, _b;
     if (!resourceConfig) {
       if (resourceQuery.data) {
-        onChange(null);
+        onChange("");
       }
       return;
     }
@@ -17765,17 +17794,29 @@ var {
   fields: { StringField }
 } = getDefaultRegistry();
 function CustomStringField(props) {
-  var _a;
+  var _a, _b, _c;
   const onChange = props.onChange;
   const resourceConfig = props.schema["x-ref"];
   const resourceQuery = useFetchIntegrationResourceQuery(resourceConfig);
+  const [pristine, setPristine] = useState12(true);
   const [isPredefinedMode, setIsPredefinedMode] = useState12(
     () => {
-      var _a2, _b, _c;
-      return ((_a2 = resourceQuery.data) == null ? void 0 : _a2.items.some((item) => item.key === props.formData)) || !props.formData && ((_c = (_b = resourceQuery.data) == null ? void 0 : _b.items.length) != null ? _c : 0) > 0 || void 0;
+      var _a2, _b2, _c2;
+      return ((_a2 = resourceQuery.data) == null ? void 0 : _a2.items.some((item) => item.key === props.formData)) || !props.formData && ((_c2 = (_b2 = resourceQuery.data) == null ? void 0 : _b2.items.length) != null ? _c2 : 0) > 0 || void 0;
     }
   );
-  const modeSelectorOptions = useMemo6(
+  const handleChange = useCallback9(
+    (value) => {
+      setPristine(false);
+      if (value !== "") {
+        onChange(value);
+        return;
+      }
+      onChange(props.schema.required ? null : void 0);
+    },
+    [onChange, props.schema.required]
+  );
+  const modeSelectorOptions = useMemo7(
     () => [
       resourceConfig ? {
         key: "predefined",
@@ -17791,8 +17832,10 @@ function CustomStringField(props) {
           }
         ) }),
         onClick: () => {
-          onChange(null);
-          setIsPredefinedMode(true);
+          handleChange("");
+          setTimeout(() => {
+            setIsPredefinedMode(true);
+          }, 50);
         }
       } : void 0,
       {
@@ -17809,28 +17852,47 @@ function CustomStringField(props) {
           }
         ) }),
         onClick: () => {
-          onChange(null);
+          handleChange("");
           setTimeout(() => {
             setIsPredefinedMode(false);
-          }, 0);
+          }, 50);
         }
       }
     ].filter(Boolean),
-    [resourceConfig, onChange, setIsPredefinedMode]
+    [resourceConfig, handleChange, setIsPredefinedMode]
   );
-  useEffect9(() => {
-    var _a2, _b, _c;
+  useEffect10(() => {
+    var _a2, _b2, _c2;
+    if (!pristine && !props.formData) {
+      return;
+    }
     setIsPredefinedMode(
       ((_a2 = resourceQuery.data) == null ? void 0 : _a2.items.some(
         (option) => option.key === props.formData
-      )) || !props.formData && ((_c = (_b = resourceQuery.data) == null ? void 0 : _b.items.length) != null ? _c : 0) > 0
+      )) || !props.formData && ((_c2 = (_b2 = resourceQuery.data) == null ? void 0 : _b2.items.length) != null ? _c2 : 0) > 0
     );
-  }, [(_a = resourceQuery.data) == null ? void 0 : _a.items, props.formData]);
+  }, [(_a = resourceQuery.data) == null ? void 0 : _a.items, props.formData, pristine]);
+  useEffect10(() => {
+    setPristine(true);
+  }, [(_c = (_b = props.formContext) == null ? void 0 : _b.frame.__meta) == null ? void 0 : _c.index]);
   if (props.schema.enum || props.schema.oneOf) {
     return /* @__PURE__ */ jsx4(StringField, __spreadValues({}, props));
   }
   return /* @__PURE__ */ jsxs2(Row7, { gap: `var(${SpacingToken11.Spacing1})`, notPadded: true, children: [
-    isPredefinedMode ? /* @__PURE__ */ jsx4(PredefinedCustomStringField, __spreadProps(__spreadValues({}, props), { resourceQuery })) : /* @__PURE__ */ jsx4(DynamicCustomStringField, __spreadProps(__spreadValues({}, props), { resourceQuery })),
+    /* @__PURE__ */ jsx4("br", {}),
+    isPredefinedMode ? /* @__PURE__ */ jsx4(
+      PredefinedCustomStringField,
+      __spreadProps(__spreadValues({}, props), {
+        onChange: handleChange,
+        resourceQuery
+      })
+    ) : /* @__PURE__ */ jsx4(
+      DynamicCustomStringField,
+      __spreadProps(__spreadValues({}, props), {
+        onChange: handleChange,
+        resourceQuery
+      })
+    ),
     modeSelectorOptions.length > 1 && /* @__PURE__ */ jsx4(
       ActionMenu,
       {
@@ -17839,9 +17901,9 @@ function CustomStringField(props) {
         triggerRenderer: /* @__PURE__ */ jsx4(
           Button11,
           {
+            disabled: props.readonly,
             icon: /* @__PURE__ */ jsx4(Icon9, { source: MoreHoriz }),
-            kind: "secondary",
-            disabled: props.readonly
+            kind: "secondary"
           }
         )
       }
@@ -18940,7 +19002,7 @@ function HttpNodeBase({
 var Base_default2 = HttpNodeBase;
 
 // src/views/Workflows/Creator/Builder/Forms/Schema/Wrapper.tsx
-import { useMemo as useMemo7, useState as useState15 } from "react";
+import { useMemo as useMemo8, useState as useState15 } from "react";
 import { Error as Error4 } from "@livechat/design-system-icons";
 import {
   Icon as Icon15,
@@ -18959,8 +19021,8 @@ import {
 } from "@livechat/platform-integrations";
 
 // src/views/Workflows/Creator/Builder/Forms/Schema/integrations/Text/index.tsx
-import { useCallback as useCallback7 } from "react";
-import { useLocation as useLocation3 } from "react-router-dom";
+import { useCallback as useCallback10 } from "react";
+import { useLocation as useLocation4 } from "react-router-dom";
 import { Button as Button15, SpacingToken as SpacingToken17 } from "@livechat/design-system-react-components";
 import {
   Card,
@@ -18974,7 +19036,7 @@ import {
   triggerAccountsAction
 } from "@livechat/platform-integrations";
 function GlobalAccounts(props) {
-  const { pathname } = useLocation3();
+  const { pathname } = useLocation4();
   const notifications = useNotificationContext3();
   const { user } = useUserContext7();
   const organizationProductsQuery = useFetchOrganizationProducts();
@@ -18985,7 +19047,7 @@ function GlobalAccounts(props) {
   const needToBeActivated = organizationProductsQuery.data ? !organizationProductsQuery.data.find(
     (product) => product.product === props.product
   ) : void 0;
-  const refetch = useCallback7(() => {
+  const refetch = useCallback10(() => {
     void organizationProductsQuery.refetch();
   }, [organizationProductsQuery]);
   return /* @__PURE__ */ jsxs2(Column8, { gap: `var(${SpacingToken17.Spacing3})`, notPadded: true, children: [
@@ -19061,11 +19123,11 @@ function CustomSchemaFormWrapper({
   preselectedTab,
   tabsMetadata
 }) {
-  const spec = useMemo7(() => WorkflowSpecification.getItemConfig(data), [data]);
+  const spec = useMemo8(() => WorkflowSpecification.getItemConfig(data), [data]);
   const [selectedTab, setSelectedTab] = useState15(
     preselectedTab != null ? preselectedTab : !spec || spec.specification.input ? "parameters" : spec && spec.customization.provider !== OTHER_TYPES.SYSTEM ? "connection" : void 0
   );
-  const tabItems = useMemo7(
+  const tabItems = useMemo8(
     () => [
       !spec || spec.specification.input ? { id: "parameters", title: "Parameters" } : void 0,
       spec && spec.customization.provider !== OTHER_TYPES.SYSTEM ? {
@@ -19135,7 +19197,7 @@ function HttpNodeForm({
   onChange,
   readonly
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
   const spec = (_a = metadata.frame.__meta) == null ? void 0 : _a.config;
   if (data.name === "http") {
     return /* @__PURE__ */ jsx4(
@@ -19184,15 +19246,7 @@ function HttpNodeForm({
               data
             }),
             formData: queryParams,
-            formErrors: ((_l = (_k = (_j = metadata.errors) == null ? void 0 : _j.inputParameters) == null ? void 0 : _k.http_request) == null ? void 0 : _l.uri) ? Object.fromEntries(
-              Object.entries(queryParams).map((entry) => {
-                var _a2, _b2, _c2;
-                return [
-                  entry[0],
-                  (_c2 = (_b2 = (_a2 = metadata.errors) == null ? void 0 : _a2.inputParameters) == null ? void 0 : _b2.http_request) == null ? void 0 : _c2.uri
-                ];
-              })
-            ) : void 0,
+            formErrors: ((_l = (_k = (_j = metadata.errors) == null ? void 0 : _j.inputParameters) == null ? void 0 : _k.http_request) == null ? void 0 : _l.uri) ? (_o = (_n = (_m = metadata.errors) == null ? void 0 : _m.inputParameters) == null ? void 0 : _n.http_request) == null ? void 0 : _o.uri : void 0,
             onChange: (formData) => {
               onChange(__spreadProps(__spreadValues({}, data), {
                 inputParameters: __spreadProps(__spreadValues({}, data.inputParameters), {
@@ -19206,14 +19260,14 @@ function HttpNodeForm({
             schema: spec.specification.input.properties.query
           }
         ) : void 0,
-        ((_n = (_m = spec == null ? void 0 : spec.specification.input) == null ? void 0 : _m.properties) == null ? void 0 : _n.body) ? /* @__PURE__ */ jsx4(
+        ((_q = (_p = spec == null ? void 0 : spec.specification.input) == null ? void 0 : _p.properties) == null ? void 0 : _q.body) ? /* @__PURE__ */ jsx4(
           Form_default,
           {
             formContext: __spreadProps(__spreadValues({}, metadata), {
               data
             }),
             formData: data.inputParameters.http_request.body,
-            formErrors: (_q = (_p = (_o = metadata.errors) == null ? void 0 : _o.inputParameters) == null ? void 0 : _p.http_request) == null ? void 0 : _q.body,
+            formErrors: (_t = (_s = (_r = metadata.errors) == null ? void 0 : _r.inputParameters) == null ? void 0 : _s.http_request) == null ? void 0 : _t.body,
             onChange: (formData) => {
               onChange(__spreadProps(__spreadValues({}, data), {
                 inputParameters: __spreadProps(__spreadValues({}, data.inputParameters), {
@@ -20170,8 +20224,8 @@ function TriggerNode(node2) {
 var Node_default6 = memo9(TriggerNode);
 
 // src/views/Workflows/Creator/Builder/Controls/CustomControls.tsx
-import { useEffect as useEffect16 } from "react";
-import { useLocation as useLocation4, useNavigate as useNavigate7 } from "react-router-dom";
+import { useEffect as useEffect17 } from "react";
+import { useLocation as useLocation5, useNavigate as useNavigate8 } from "react-router-dom";
 import { ControlButton, Controls, useReactFlow as useReactFlow2 } from "reactflow";
 import {
   ArrowAutofitWidth,
@@ -20317,7 +20371,7 @@ function StopGenerateButton() {
 }
 
 // src/views/Workflows/Common/One/widget/message-box/AskButton.tsx
-import { useEffect as useEffect11, useState as useState22 } from "react";
+import { useEffect as useEffect12, useState as useState22 } from "react";
 import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
 import {
   Button as Button17,
@@ -20326,7 +20380,7 @@ import {
 } from "@livechat/design-system-react-components";
 
 // src/views/Workflows/Common/One/hooks/useAboveCharacterLimit.ts
-import { useEffect as useEffect10, useState as useState21 } from "react";
+import { useEffect as useEffect11, useState as useState21 } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 
 // src/views/Workflows/Common/One/widget/message-box/constants.ts
@@ -20336,7 +20390,7 @@ var ONE_CHARACTER_LIMIT = 1e4;
 var useAboveCharacterLimit = () => {
   const [editor] = useLexicalComposerContext();
   const [aboveLimit, setAboveLimit] = useState21(0);
-  useEffect10(() => {
+  useEffect11(() => {
     const registerTextContentListener = editor.registerTextContentListener(
       (textContent) => {
         setAboveLimit(textContent.length - ONE_CHARACTER_LIMIT);
@@ -20353,13 +20407,13 @@ var useAboveCharacterLimit = () => {
 };
 
 // src/views/Workflows/Common/One/hooks/useSendOneMessage.ts
-import { useCallback as useCallback8, useContext as useContext8 } from "react";
+import { useCallback as useCallback11, useContext as useContext8 } from "react";
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 var useSendOneMessage = () => {
   const [editor] = useLexicalComposerContext2();
   const { sendMessage: sendMessage2 } = useContext8(OneMessagesContext);
-  const onSend = useCallback8(() => {
+  const onSend = useCallback11(() => {
     var _a;
     const messageToSend = (_a = editor.getRootElement()) == null ? void 0 : _a.innerText.trim();
     if (!messageToSend) {
@@ -20378,7 +20432,7 @@ function AskButton() {
   const isLoading = false;
   const { isAboveLimit } = useAboveCharacterLimit();
   const handleSend = useSendOneMessage();
-  useEffect11(() => {
+  useEffect12(() => {
     const registerTextContentListener = editor.registerTextContentListener(
       (textContent) => {
         setIsDisabled(!textContent);
@@ -20452,34 +20506,34 @@ import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
 
 // src/views/Workflows/Common/One/widget/message-box/custom-plugins/AutoFocusPlugin.tsx
-import { useCallback as useCallback9, useEffect as useEffect12 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect13 } from "react";
 import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
 function AutoFocusPlugin() {
   const [editor] = useLexicalComposerContext4();
-  const handleFocus = useCallback9(() => {
+  const handleFocus = useCallback12(() => {
     editor.focus();
   }, [editor]);
-  useEffect12(() => {
+  useEffect13(() => {
     handleFocus();
   }, []);
   return null;
 }
 
 // src/views/Workflows/Common/One/widget/message-box/custom-plugins/EnterDownPlugin.tsx
-import { useCallback as useCallback10, useEffect as useEffect13 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect14 } from "react";
 import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
 import { COMMAND_PRIORITY_LOW, KEY_ENTER_COMMAND } from "lexical";
 function EnterDownPlugin({ isCommandMenuVisibleRef }) {
   const [editor] = useLexicalComposerContext5();
   const isLoading = false;
   const handleSendMessage = useSendOneMessage();
-  const onEnterDown = useCallback10(() => {
+  const onEnterDown = useCallback13(() => {
     if (isLoading || (isCommandMenuVisibleRef == null ? void 0 : isCommandMenuVisibleRef.current)) {
       return;
     }
     handleSendMessage({ enter: true, messageBox: true });
   }, [handleSendMessage, isLoading, isCommandMenuVisibleRef]);
-  useEffect13(
+  useEffect14(
     () => editor.registerCommand(
       KEY_ENTER_COMMAND,
       (event) => {
@@ -20542,10 +20596,10 @@ function OneMessageBox() {
 }
 
 // src/views/Workflows/Common/One/widget/OneChatFeedContent.tsx
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 
 // src/views/Workflows/Common/One/hooks/useScroll.ts
-import { useCallback as useCallback11, useEffect as useEffect14, useRef as useRef6 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect15, useRef as useRef7 } from "react";
 import debounce4 from "lodash.debounce";
 var useScroll = ({
   oneChatFeedRef,
@@ -20553,10 +20607,10 @@ var useScroll = ({
   additionalEvents
 }) => {
   const oneScrollPosition = 0;
-  const currentScrollPosition = useRef6(null);
-  const isScrolledToBottom = useRef6(true);
-  const timeoutRef = useRef6(null);
-  const scrollToBottom = useCallback11(() => {
+  const currentScrollPosition = useRef7(null);
+  const isScrolledToBottom = useRef7(true);
+  const timeoutRef = useRef7(null);
+  const scrollToBottom = useCallback14(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }
@@ -20572,7 +20626,7 @@ var useScroll = ({
       }
     };
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     var _a;
     if (!oneScrollPosition) {
       scrollToBottom();
@@ -20581,12 +20635,12 @@ var useScroll = ({
     (_a = oneChatFeedRef.current) == null ? void 0 : _a.scrollTo({ top: oneScrollPosition });
     currentScrollPosition.current = oneScrollPosition;
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (additionalEvents && isScrolledToBottom.current) {
       scrollToBottom();
     }
   }, [scrollToBottom, additionalEvents]);
-  useEffect14(() => {
+  useEffect15(() => {
     const [lastGroupEvent] = groupedEvents.slice(-1)[0];
     const isLastMessageFromAgent = lastGroupEvent.authorType === "agent" /* Agent */;
     if (isLastMessageFromAgent || isScrolledToBottom.current) {
@@ -21155,7 +21209,7 @@ function OneErrorEvent({ eventId }) {
 }
 
 // src/views/Workflows/Common/One/widget/events/OneImageEvent.tsx
-import { useEffect as useEffect15, useState as useState23 } from "react";
+import { useEffect as useEffect16, useState as useState23 } from "react";
 
 // src/views/Workflows/Common/One/components/SkeletonLine.tsx
 import { DesignToken as DesignToken26 } from "@livechat/design-system-react-components";
@@ -21219,7 +21273,7 @@ function SkeletonLine({
 // src/views/Workflows/Common/One/widget/events/OneImageEvent.tsx
 function OneImageEvent({ imageUrl }) {
   const [isLoaded, setIsLoaded] = useState23(false);
-  useEffect15(() => {
+  useEffect16(() => {
     const image = new Image();
     image.src = imageUrl;
     image.onload = () => {
@@ -21370,7 +21424,7 @@ var MarkdownEventRenderer = ({ children }) => /* @__PURE__ */ jsx4(
 );
 
 // src/views/Workflows/Common/One/components/NavigateButton.tsx
-import { useNavigate as useNavigate6 } from "react-router-dom";
+import { useNavigate as useNavigate7 } from "react-router-dom";
 import { Add as Add7, ArrowForward, OpenInNew } from "@livechat/design-system-icons";
 import {
   Button as Button19,
@@ -21392,7 +21446,7 @@ function NavigateButton({
   kind,
   iconPosition
 }) {
-  const navigate = useNavigate6();
+  const navigate = useNavigate7();
   const handleButtonClick = () => {
     if (isExternal) {
       window.open(url, "_blank");
@@ -21824,7 +21878,7 @@ function OneChatFeedContent({
   updateWorkflow,
   previewWorkflow
 }) {
-  const oneChatFeedRef = useRef7(null);
+  const oneChatFeedRef = useRef8(null);
   const { groupedEvents, hasAdditionalEvents } = useOneMessagesContext();
   const { handleScroll } = useScroll({
     oneChatFeedRef,
@@ -21919,15 +21973,15 @@ function CustomControls({
   previewWorkflow
 }) {
   var _a;
-  const navigate = useNavigate7();
+  const navigate = useNavigate8();
   const { fitView, zoomIn, zoomOut } = useReactFlow2();
   const { toggleOneWidget, isOpen } = useOneWidgetContext();
   const {
     state: { visibility },
     focus
   } = useWorkflowCreator();
-  const location = useLocation4();
-  useEffect16(() => {
+  const location = useLocation5();
+  useEffect17(() => {
     var _a2;
     if ((_a2 = location.state) == null ? void 0 : _a2.openOne) {
       if (!isOpen) {
@@ -22033,7 +22087,7 @@ var CustomControls_default = CustomControls;
 
 // src/views/Workflows/Creator/Builder/Controls/SwitcherControls.tsx
 import { useState as useState26 } from "react";
-import { useNavigate as useNavigate8 } from "react-router-dom";
+import { useNavigate as useNavigate9 } from "react-router-dom";
 import { Controls as Controls2 } from "reactflow";
 import { SegmentedControl } from "@livechat/design-system-react-components";
 import { jsx as jsx13 } from "react/jsx-runtime";
@@ -22045,7 +22099,7 @@ function SwitcherControls({
   const [currentView, setCurrentView] = useState26(
     isDraft ? "draft" : "published"
   );
-  const navigate = useNavigate8();
+  const navigate = useNavigate9();
   const {
     focus,
     state: { visibility }
@@ -22574,13 +22628,13 @@ function WorkflowBuilder() {
     []
   );
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const onConnect = useCallback12(
+  const onConnect = useCallback15(
     (params) => {
       setEdges((eds) => addEdge(params, eds));
     },
     [setEdges]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     void (() => __async(this, null, function* () {
       const { nodes: nodes2, edges: edges2 } = yield convertWorkflowDefinitionToReactflow(
         workflow
@@ -22712,8 +22766,8 @@ function PreviewWorkflowModal({
   onApply,
   onClose
 }) {
-  const navigate = useNavigate9();
-  const handleClose = useCallback13(
+  const navigate = useNavigate10();
+  const handleClose = useCallback16(
     (target) => {
       if (onClose) {
         onClose();
@@ -22727,7 +22781,7 @@ function PreviewWorkflowModal({
     },
     [onClose, navigate]
   );
-  const handleApply = useCallback13(() => {
+  const handleApply = useCallback16(() => {
     if (onApply) {
       onApply();
     }
@@ -22818,39 +22872,56 @@ function PublishWorkflowModal({
     },
     publishDraft
   } = useWorkflowCreator();
-  return /* @__PURE__ */ jsx15(Modal7, { heading: true, onClose, children: /* @__PURE__ */ jsx15(
-    ActionModalContent3,
+  return /* @__PURE__ */ jsx15(
+    Modal7,
     {
-      actions: /* @__PURE__ */ jsxs8(Fragment9, { children: [
-        /* @__PURE__ */ jsx15(Button24, { kind: "secondary", onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx15(
-          Button24,
-          {
-            kind: "primary",
-            loading: isPublishing,
-            onClick: () => void publishDraft({
-              confirmed: true
-            }),
-            children: "Publish workflow"
-          }
-        )
-      ] }),
-      heading: "You are publishing a workflow",
-      icon: /* @__PURE__ */ jsx15(
-        Icon26,
+      heading: true,
+      onClose,
+      "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.modals.publish.wrapper,
+      children: /* @__PURE__ */ jsx15(
+        ActionModalContent3,
         {
-          customColor: `var(${DesignToken33.ContentBasicDisabled})`,
-          size: "xxlarge",
-          source: Error5
+          actions: /* @__PURE__ */ jsxs8(Fragment9, { children: [
+            /* @__PURE__ */ jsx15(
+              Button24,
+              {
+                kind: "secondary",
+                onClick: onClose,
+                "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.modals.publish.cancelButton,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx15(
+              Button24,
+              {
+                kind: "primary",
+                loading: isPublishing,
+                onClick: () => void publishDraft({
+                  confirmed: true
+                }),
+                "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.modals.publish.saveButton,
+                children: "Publish workflow"
+              }
+            )
+          ] }),
+          heading: "You are publishing a workflow",
+          icon: /* @__PURE__ */ jsx15(
+            Icon26,
+            {
+              customColor: `var(${DesignToken33.ContentBasicDisabled})`,
+              size: "xxlarge",
+              source: Error5
+            }
+          ),
+          children: "Once published, this will be the working version of your workflow and will\xA0be\xA0automatically set to active."
         }
-      ),
-      children: "Once published, this will be the working version of your workflow and will\xA0be\xA0automatically set to active."
+      )
     }
-  ) });
+  );
 }
 
 // src/views/Workflows/Creator/View.tsx
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect20 } from "react";
 import { Route as Route2, Routes as Routes2 } from "react-router-dom";
 import { useReactFlow as useReactFlow3 } from "reactflow";
 import {
@@ -22868,7 +22939,7 @@ var sendMessage = (type) => {
 import { Navigate, Route, Routes } from "react-router-dom";
 
 // src/views/Workflows/Creator/Panels/Details/Panel.tsx
-import { useNavigate as useNavigate10, useParams as useParams3 } from "react-router-dom";
+import { useNavigate as useNavigate11, useParams as useParams4 } from "react-router-dom";
 import { Close as Close3 } from "@livechat/design-system-icons";
 import {
   Button as Button25,
@@ -22889,11 +22960,14 @@ import { Row as Row14 } from "@livechat/developer-studio-ui-react";
 // src/views/Workflows/Creator/Panels/Details/Executions/List.tsx
 import { CheckCircle as CheckCircle2, CloseCircle as CloseCircle2 } from "@livechat/design-system-icons";
 import {
-  Badge as Badge2,
   DesignToken as DesignToken34,
   Icon as Icon27,
-  SpacingToken as SpacingToken29
+  SpacingToken as SpacingToken29,
+  Tag as Tag2
 } from "@livechat/design-system-react-components";
+import {
+  WorkflowExecutionStatus
+} from "@livechat/developer-studio-api";
 import { formatUSADate, Row as Row12 } from "@livechat/developer-studio-ui-react";
 var tableCss = css`
   font-size: 13px;
@@ -22927,22 +23001,18 @@ function WorkflowExecutionList({
       /* @__PURE__ */ jsx4("td", { children: formatUSADate(execution.started_at) }),
       /* @__PURE__ */ jsx4("td", { children: formatUSADate(execution.ended_at) }),
       /* @__PURE__ */ jsx4("td", { children: /* @__PURE__ */ jsx4(
-        Badge2,
+        Tag2,
         {
-          css: css`
-                      display: flex;
-                      background-color: ${execution.status === "COMPLETED" ? `var(${DesignToken34.SurfaceAccentEmphasisLowPositive})` : `var(${DesignToken34.SurfaceAccentEmphasisLowNegative})`};
-                      color: ${execution.status === "COMPLETED" ? `var(${DesignToken34.ContentBasicPositive})` : `var(${DesignToken34.ContentBasicNegative})`};
-                    `,
-          children: /* @__PURE__ */ jsxs2(Row12, { gap: 4, notPadded: true, children: [
-            /* @__PURE__ */ jsx4(
-              Icon27,
-              {
-                source: execution.status === "COMPLETED" ? CheckCircle2 : CloseCircle2
-              }
-            ),
-            execution.status
-          ] })
+          size: "small",
+          kind: execution.status === WorkflowExecutionStatus.Completed ? "success" : "error",
+          leftNode: /* @__PURE__ */ jsx4(
+            Icon27,
+            {
+              size: "small",
+              source: execution.status === WorkflowExecutionStatus.Completed ? CheckCircle2 : CloseCircle2
+            }
+          ),
+          children: execution.status
         }
       ) })
     ] }, execution.id)) : /* @__PURE__ */ jsx4("tr", { children: /* @__PURE__ */ jsx4("td", { align: "center", colSpan: 4, children: "No executions" }) }) })
@@ -23048,8 +23118,8 @@ function WorkflowDetailsPanel({
   onClose
 }) {
   var _a, _b, _c, _d, _e;
-  const navigate = useNavigate10();
-  const { id, tab } = useParams3();
+  const navigate = useNavigate11();
+  const { id, tab } = useParams4();
   const workflowQuery = useFetchWorkflow(id);
   const workflowExecutionsQuery = useFetchWorkflowExecutionList(id);
   const relatedWorkflowQuery = useFetchWorkflow(
@@ -23163,8 +23233,8 @@ function WorkflowDetails({
 }
 
 // src/views/Workflows/Creator/Panels/Editor/Panel.tsx
-import { useRef as useRef8, useState as useState27 } from "react";
-import { useNavigate as useNavigate11 } from "react-router-dom";
+import { useRef as useRef9, useState as useState27 } from "react";
+import { useNavigate as useNavigate12 } from "react-router-dom";
 import { Editor } from "@monaco-editor/react";
 import { Close as Close4 } from "@livechat/design-system-icons";
 import {
@@ -23195,13 +23265,13 @@ function configureMonaco(monaco) {
   });
 }
 function WorkflowEditorPanel({ onClose }) {
-  const navigate = useNavigate11();
+  const navigate = useNavigate12();
   const {
     state: { workflow },
     replaceWorkflow,
     focus
   } = useWorkflowCreator();
-  const editorRef = useRef8();
+  const editorRef = useRef9();
   const [, setIsModified] = useState27(false);
   const [, setJsonErrors] = useState27([]);
   const filteredWorkflow = {
@@ -23437,64 +23507,71 @@ function WorkflowElementPanel() {
     }
   };
   const revertIconColor = getWorkflowsEnv("isHeadless") && ((config2 == null ? void 0 : config2.customization.provider) === IntegrationNames18.OpenAI || (config2 == null ? void 0 : config2.customization.provider) === IntegrationNames18.BigCommerce);
-  return /* @__PURE__ */ jsxs2(Wrapper4, { children: [
-    /* @__PURE__ */ jsxs2(Row16, { center: true, setRowPadding: "12px 24px", spaceBetween: true, children: [
-      /* @__PURE__ */ jsx4(
-        Header7,
-        {
-          css: css`
+  return /* @__PURE__ */ jsxs2(
+    Wrapper4,
+    {
+      "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.panels.element.wrapper,
+      children: [
+        " ",
+        /* @__PURE__ */ jsxs2(Row16, { center: true, setRowPadding: "12px 24px", spaceBetween: true, children: [
+          /* @__PURE__ */ jsx4(
+            Header7,
+            {
+              css: css`
             max-width: 85%;
           `,
-          children: /* @__PURE__ */ jsxs2(Title7, { children: [
-            (config2 == null ? void 0 : config2.customization.product) ? /* @__PURE__ */ jsx4(
-              ProductIcon_default,
-              {
-                center: true,
-                disabled: false,
-                height: 10,
-                product: config2.customization.provider,
-                revertColors: revertIconColor,
-                width: 10
-              }
-            ) : /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
-              Icon30,
-              {
-                css: css`
+              children: /* @__PURE__ */ jsxs2(Title7, { children: [
+                (config2 == null ? void 0 : config2.customization.product) ? /* @__PURE__ */ jsx4(
+                  ProductIcon_default,
+                  {
+                    center: true,
+                    disabled: false,
+                    height: 10,
+                    product: config2.customization.provider,
+                    revertColors: revertIconColor,
+                    width: 10
+                  }
+                ) : /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
+                  Icon30,
+                  {
+                    css: css`
                     width: var(${SpacingToken33.Spacing6});
                   `,
-                size: "xlarge",
-                source: Automation2
-              }
-            ) }),
-            /* @__PURE__ */ jsxs2(Column13, { noFlexBasis: true, notPadded: true, children: [
-              /* @__PURE__ */ jsxs2("strong", { children: [
-                ((_d = frame == null ? void 0 : frame.__meta) == null ? void 0 : _d.index) !== void 0 ? `${frame.__meta.index}. ` : "",
-                (_e = config2 == null ? void 0 : config2.customization.displayName) != null ? _e : data.type === NodeNames.switch ? "Condition" : data.type === NodeNames.http ? "Custom HTTP" : data.type === NodeNames.terminate ? "End workflow" : ""
-              ] }),
-              (_f = config2 == null ? void 0 : config2.customization.description) != null ? _f : data.type === NodeNames.switch ? "Conditional execution" : data.type === NodeNames.http ? "Make an HTTP request" : data.type === NodeNames.terminate ? "End the workflow" : ""
-            ] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx4(
-        Button27,
-        {
-          kind: "plain",
-          onClick: () => {
-            toggle();
-          },
-          children: /* @__PURE__ */ jsx4(Icon30, { source: Close5 })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx4(Row16, { css: formCss, children: contentHandler() })
-  ] });
+                    size: "xlarge",
+                    source: Automation2
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs2(Column13, { noFlexBasis: true, notPadded: true, children: [
+                  /* @__PURE__ */ jsxs2("strong", { children: [
+                    ((_d = frame == null ? void 0 : frame.__meta) == null ? void 0 : _d.index) !== void 0 ? `${frame.__meta.index}. ` : "",
+                    (_e = config2 == null ? void 0 : config2.customization.displayName) != null ? _e : data.type === NodeNames.switch ? "Condition" : data.type === NodeNames.http ? "Custom HTTP" : data.type === NodeNames.terminate ? "End workflow" : ""
+                  ] }),
+                  (_f = config2 == null ? void 0 : config2.customization.description) != null ? _f : data.type === NodeNames.switch ? "Conditional execution" : data.type === NodeNames.http ? "Make an HTTP request" : data.type === NodeNames.terminate ? "End the workflow" : ""
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            Button27,
+            {
+              kind: "plain",
+              onClick: () => {
+                toggle();
+              },
+              children: /* @__PURE__ */ jsx4(Icon30, { source: Close5 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx4(Row16, { css: formCss, children: contentHandler() })
+      ]
+    }
+  );
 }
 var Panel_default3 = WorkflowElementPanel;
 
 // src/views/Workflows/Creator/Navbar.tsx
-import { useEffect as useEffect18, useRef as useRef9, useState as useState28 } from "react";
-import { useNavigate as useNavigate12 } from "react-router-dom";
+import { useEffect as useEffect19, useRef as useRef10, useState as useState28 } from "react";
+import { useNavigate as useNavigate13 } from "react-router-dom";
 import { ChevronDown as ChevronDown3, Close as Close6 } from "@livechat/design-system-icons";
 import {
   ActionMenu as ActionMenu2,
@@ -23515,7 +23592,7 @@ import {
 } from "@livechat/developer-studio-ui-react";
 function WorkflowCreatorNavbar() {
   var _a, _b, _c, _d, _e;
-  const navigate = useNavigate12();
+  const navigate = useNavigate13();
   const {
     state: {
       workflow,
@@ -23528,14 +23605,14 @@ function WorkflowCreatorNavbar() {
     publishDraft,
     toggle
   } = useWorkflowCreator();
-  const inputRef = useRef9(null);
+  const inputRef = useRef10(null);
   const [isNameChanging, setIsNameChanging] = useState28(false);
   const [workflowName, setWorkflowName] = useState28(workflow.name);
   const { user } = useUserContext8();
   const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
     user == null ? void 0 : user.meta.email
   );
-  useEffect18(() => {
+  useEffect19(() => {
     setWorkflowName(workflow.name);
   }, [workflow.name]);
   useOnClickOutside2(inputRef, () => {
@@ -23710,7 +23787,8 @@ function WorkflowCreatorNavbar() {
                         on: workflow.active,
                         onChange: () => void activate(),
                         size: "medium",
-                        state: isActivating ? "loading" : workflow.draft ? "locked" : "regular"
+                        state: isActivating ? "loading" : workflow.draft ? "locked" : "regular",
+                        "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.navbar.activateSwitch
                       }
                     ),
                     children: workflow.draft ? "Publish the draft to activate this workflow" : workflow.active ? "Deactivate flow" : "Activate flow"
@@ -23729,7 +23807,15 @@ function WorkflowCreatorNavbar() {
                 workflow.draft ? !workflow.trigger.type || !workflow.definition.tasks.length ? /* @__PURE__ */ jsxs2(
                   Tooltip8,
                   {
-                    triggerRenderer: /* @__PURE__ */ jsx4(Button28, { disabled: true, kind: "primary", children: "Publish" }),
+                    triggerRenderer: /* @__PURE__ */ jsx4(
+                      Button28,
+                      {
+                        disabled: true,
+                        kind: "primary",
+                        "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.navbar.publishButton,
+                        children: "Publish"
+                      }
+                    ),
                     children: [
                       !workflow.trigger.type && "To publish a workflow, add a trigger.",
                       !workflow.definition.tasks.length && "To publish a workflow, add at least one task."
@@ -23747,6 +23833,7 @@ function WorkflowCreatorNavbar() {
                       );
                       void publishDraft();
                     },
+                    "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.navbar.publishButton,
                     children: "Publish"
                   }
                 ) : /* @__PURE__ */ jsx4(
@@ -23762,6 +23849,7 @@ function WorkflowCreatorNavbar() {
                       }
                       void createDraft();
                     },
+                    "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.navbar.editButton,
                     children: "Edit"
                   }
                 )
@@ -23795,7 +23883,7 @@ function WorkflowCreatorView() {
     focus
   } = useWorkflowCreator();
   const { fitView } = useReactFlow3();
-  useEffect19(() => {
+  useEffect20(() => {
     if (getWorkflowsEnv("isLiveChatMode")) {
       sendMessage("closeSideNav" /* CloseSideNav */);
       const timeoutId = setTimeout(() => {
@@ -23839,9 +23927,9 @@ var View_default = WorkflowCreatorView;
 // src/views/Workflows/Creator/index.tsx
 function WorkflowCreator() {
   var _a, _b, _c;
-  const location = useLocation5();
-  const { id } = useParams4();
-  const navigate = useNavigate13();
+  const location = useLocation6();
+  const { id } = useParams5();
+  const navigate = useNavigate14();
   const workflowQuery = useFetchWorkflow(id === "new" ? void 0 : id);
   const credentialsQuery = useFetchIntegrationCredentialsQuery2();
   const organizationProducts = useFetchOrganizationProducts2();
@@ -23980,12 +24068,12 @@ import { Row as Row27 } from "@livechat/developer-studio-ui-react";
 import { Route as Route4, Routes as Routes4 } from "react-router-dom";
 
 // src/views/Workflows/List/Modals/PreviewTemplate/index.tsx
-import { useMemo as useMemo8 } from "react";
-import { useParams as useParams5 } from "react-router-dom";
+import { useMemo as useMemo9 } from "react";
+import { useParams as useParams6 } from "react-router-dom";
 
 // src/views/Workflows/List/Modals/PreviewTemplate/Modal.tsx
-import { useCallback as useCallback14 } from "react";
-import { useNavigate as useNavigate14 } from "react-router-dom";
+import { useCallback as useCallback17 } from "react";
+import { useNavigate as useNavigate15 } from "react-router-dom";
 import { ArrowBackFilled } from "@livechat/design-system-icons";
 import {
   Button as Button29,
@@ -23996,7 +24084,7 @@ import {
   ModalHeader as ModalHeader5,
   RadiusToken as RadiusToken19,
   SpacingToken as SpacingToken37,
-  Tag as Tag2,
+  Tag as Tag3,
   Text as Text19
 } from "@livechat/design-system-react-components";
 import {
@@ -24092,7 +24180,7 @@ function WorkflowTemplatePreviewModal({
   template,
   onClose
 }) {
-  const navigate = useNavigate14();
+  const navigate = useNavigate15();
   const {
     save,
     state: {
@@ -24103,7 +24191,7 @@ function WorkflowTemplatePreviewModal({
   const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
     user == null ? void 0 : user.meta.email
   );
-  const handleClose = useCallback14(
+  const handleClose = useCallback17(
     (target) => {
       if (onClose) {
         onClose();
@@ -24122,7 +24210,7 @@ function WorkflowTemplatePreviewModal({
     return products.map((product, i) => {
       const icon2 = templateIcons[i];
       return /* @__PURE__ */ jsx4(
-        Tag2,
+        Tag3,
         {
           leftNode: /* @__PURE__ */ jsx4(ProductIcon_default, { height: 4, product: icon2, width: 4 }),
           size: "small",
@@ -24249,8 +24337,8 @@ function WorkflowTemplatePreview({
   workflow,
   onClose
 }) {
-  const flowTemplates = useMemo8(() => getWorkflowTemplates(), []);
-  const params = useParams5();
+  const flowTemplates = useMemo9(() => getWorkflowTemplates(), []);
+  const params = useParams6();
   const template = flowTemplates.find((t) => t.id === params.template);
   const targetWorkflow = workflow || (template == null ? void 0 : template.workflow);
   if (!template) {
@@ -24281,12 +24369,12 @@ function WorkflowTemplatePreview({
 var PreviewTemplate_default = WorkflowTemplatePreview;
 
 // src/views/Workflows/List/Modals/Create/Modal.tsx
-import { useCallback as useCallback17 } from "react";
-import { useNavigate as useNavigate17 } from "react-router-dom";
+import { useCallback as useCallback20 } from "react";
+import { useNavigate as useNavigate18 } from "react-router-dom";
 import { Modal as Modal9, ModalHeader as ModalHeader6 } from "@livechat/design-system-react-components";
 
 // src/views/Workflows/List/Home/Home.tsx
-import { useMemo as useMemo9, useState as useState31 } from "react";
+import { useMemo as useMemo10, useState as useState31 } from "react";
 import { FiletypeOther, OneColored } from "@livechat/design-system-icons";
 import {
   DesignToken as DesignToken43,
@@ -24296,7 +24384,7 @@ import {
 import { Column as Column17, Intro as Intro3, Row as Row24 } from "@livechat/developer-studio-ui-react";
 
 // src/views/Workflows/List/Modals/TemplateList/Filters/Category.tsx
-import { useCallback as useCallback15, useState as useState29 } from "react";
+import { useCallback as useCallback18, useState as useState29 } from "react";
 import {
   ChatDots as ChatDots2,
   CurrencyDollar as CurrencyDollar2,
@@ -24319,7 +24407,7 @@ function WorkflowTemplatesCategoryFilter({
 }) {
   var _a;
   const [isVisible, setIsVisible] = useState29(false);
-  const getItem = useCallback15(
+  const getItem = useCallback18(
     (key, category, icon2) => ({
       key,
       element: /* @__PURE__ */ jsxs2(Row20, { gap: `var(${SpacingToken38.Spacing1});`, notPadded: true, children: [
@@ -24374,7 +24462,7 @@ function WorkflowTemplatesCategoryFilter({
 var Category_default = WorkflowTemplatesCategoryFilter;
 
 // src/views/Workflows/List/Modals/TemplateList/Filters/Product.tsx
-import { useCallback as useCallback16, useState as useState30 } from "react";
+import { useCallback as useCallback19, useState as useState30 } from "react";
 import {
   Chatgpt,
   HelpDeskColored,
@@ -24397,7 +24485,7 @@ function WorkflowTemplatesProductFilter({
 }) {
   var _a;
   const [isVisible, setIsVisible] = useState30(false);
-  const getItem = useCallback16(
+  const getItem = useCallback19(
     (key, product, icon2) => ({
       key,
       element: /* @__PURE__ */ jsxs2(Row21, { gap: `var(${SpacingToken39.Spacing1});`, notPadded: true, children: [
@@ -24454,7 +24542,7 @@ function WorkflowTemplatesProductFilter({
 var Product_default = WorkflowTemplatesProductFilter;
 
 // src/views/Workflows/List/Home/Cards/Scratch.tsx
-import { useNavigate as useNavigate15 } from "react-router-dom";
+import { useNavigate as useNavigate16 } from "react-router-dom";
 import {
   Heading as Heading6,
   Icon as Icon36,
@@ -24471,7 +24559,7 @@ function WorkflowScratchCard({
   icon: icon2,
   openOne
 }) {
-  const navigate = useNavigate15();
+  const navigate = useNavigate16();
   const { user } = useUserContext10();
   const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
     user == null ? void 0 : user.meta.email
@@ -24503,7 +24591,7 @@ function WorkflowScratchCard({
 var Scratch_default = WorkflowScratchCard;
 
 // src/views/Workflows/List/Home/Cards/Template.tsx
-import { useNavigate as useNavigate16 } from "react-router-dom";
+import { useNavigate as useNavigate17 } from "react-router-dom";
 import {
   DesignToken as DesignToken42,
   Heading as Heading7,
@@ -24525,7 +24613,7 @@ function WorkflowTemplateCard({
   icons,
   category
 }) {
-  const navigate = useNavigate16();
+  const navigate = useNavigate17();
   return /* @__PURE__ */ jsx4(
     Card3,
     {
@@ -24571,7 +24659,7 @@ var Grid = newStyled.div`
 function WorkflowsHome({ isOnModal }) {
   const [product, setProduct] = useState31("All");
   const [category, setCategory] = useState31("All");
-  const flowTemplates = useMemo9(() => getWorkflowTemplates(), []);
+  const flowTemplates = useMemo10(() => getWorkflowTemplates(), []);
   const filters = [
     (template) => product === "All" || template.products.includes(product),
     (template) => category === "All" || template.category.includes(category)
@@ -24673,8 +24761,8 @@ var Home_default = WorkflowsHome;
 
 // src/views/Workflows/List/Modals/Create/Modal.tsx
 function WorkflowCreateModal({ onClose }) {
-  const navigate = useNavigate17();
-  const handleClose = useCallback17(() => {
+  const navigate = useNavigate18();
+  const handleClose = useCallback20(() => {
     if (onClose) {
       onClose();
       return;
@@ -24708,7 +24796,7 @@ var Create_default = WorkflowCreate;
 
 // src/views/Workflows/List/View.tsx
 import { useState as useState33 } from "react";
-import { useNavigate as useNavigate20 } from "react-router-dom";
+import { useNavigate as useNavigate21 } from "react-router-dom";
 import {
   Button as Button35,
   DesignToken as DesignToken46,
@@ -24724,8 +24812,8 @@ import {
 } from "@livechat/developer-studio-ui-react";
 
 // src/views/Workflows/Creator/LiveChatNavbar.tsx
-import { useCallback as useCallback18 } from "react";
-import { useNavigate as useNavigate18 } from "react-router-dom";
+import { useCallback as useCallback21 } from "react";
+import { useNavigate as useNavigate19 } from "react-router-dom";
 import { LayoutSidebarLeft } from "@livechat/design-system-icons";
 import {
   Button as Button32,
@@ -24749,12 +24837,12 @@ var wrapperCss = (hasData) => css`
   }`}
 `;
 function LiveChatNavbar() {
-  const navigate = useNavigate18();
+  const navigate = useNavigate19();
   const workflows = useFetchWorkflows({});
   const isLoading = workflows.isLoading;
   const hasNoData = workflows.isSuccess && workflows.data.length === 0;
   const hasData = !isLoading && !hasNoData;
-  const handleClick = useCallback18(() => {
+  const handleClick = useCallback21(() => {
     sendMessage("toggleSideNav" /* ToggleSideNav */);
   }, []);
   return /* @__PURE__ */ jsxs2("div", { css: wrapperCss(hasData), children: [
@@ -24856,7 +24944,7 @@ function WorkflowStatusFilter({
 var StatusFilter_default = WorkflowStatusFilter;
 
 // src/views/Workflows/List/Grid/Table.tsx
-import { useNavigate as useNavigate19 } from "react-router-dom";
+import { useNavigate as useNavigate20 } from "react-router-dom";
 import {
   Delete as Delete3,
   Info as Info2,
@@ -24871,7 +24959,7 @@ import {
   Icon as Icon39,
   SpacingToken as SpacingToken44,
   Switch as Switch2,
-  Tag as Tag3,
+  Tag as Tag4,
   Text as Text21,
   Tooltip as Tooltip9
 } from "@livechat/design-system-react-components";
@@ -24886,7 +24974,7 @@ import {
 } from "@livechat/developer-studio-ui-react";
 function WorkflowsTable({ workflowsQuery, state }) {
   var _a, _b, _c;
-  const navigate = useNavigate19();
+  const navigate = useNavigate20();
   const notifications = useNotificationContext5();
   const deleteAction = useDeleteWorkflow();
   const activateWorkflowAction = useActivateWorkflow();
@@ -24934,7 +25022,7 @@ function WorkflowsTable({ workflowsQuery, state }) {
               /* @__PURE__ */ jsx4("td", { width: "45%", children: /* @__PURE__ */ jsxs2(Row25, { gap: `var(${SpacingToken44.Spacing2})`, noWrap: true, notPadded: true, children: [
                 /* @__PURE__ */ jsx4(Text21, { noMargin: true, size: "sm", children: workflow.name }),
                 workflow.related_workflow_id ? /* @__PURE__ */ jsx4(
-                  Tag3,
+                  Tag4,
                   {
                     css: css`
                             color: #68afff;
@@ -25130,7 +25218,7 @@ var markedStyles = css`
 `;
 function WorkflowListView() {
   var _a;
-  const navigate = useNavigate20();
+  const navigate = useNavigate21();
   const [state, setState] = useState33({
     filters: {
       status: "All",
@@ -25220,9 +25308,9 @@ var List_default2 = WorkflowList;
 // src/views/Workflows/index.tsx
 import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function Workflows() {
-  const navigate = useNavigate21();
+  const navigate = useNavigate22();
   const { userHasInstalledWorkflows, isWorkflowAppLoading } = useFetchUserInstalledWorkflows();
-  useEffect20(() => {
+  useEffect21(() => {
     if (isWorkflowAppLoading) {
       return;
     }
@@ -25298,6 +25386,7 @@ function WorkflowsModule({ waitlistImage }) {
 }
 export {
   LoginError_default as LoginError,
+  WORKFLOWS_TEST_SELECTORS,
   WorkflowsModule,
   config,
   getWorkflowsEnv,