@livechat/platform-workflows 0.0.88 → 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
@@ -4107,9 +4051,9 @@ var helpdeskTaskConfigs = () => ({
       input: WORKFLOW_HTTP_TASK_INPUT_SCHEMA(
         {
           type: "object",
-          required: ["tag_ids"],
+          required: ["tagIDs"],
           properties: {
-            tag_ids: {
+            tagIDs: {
               type: "array",
               title: "Tag IDs",
               items: {
@@ -4370,7 +4314,7 @@ var helpdeskTaskTemplates = () => ({
         )}/functions/add-tags-to-helpdesk-ticket?id=#{ticket_id}`,
         method: "POST",
         body: {
-          tag_ids: ["#{tag_id}"]
+          tagIDs: ["#{tag_id}"]
         },
         headers: {
           Accept: "application/json",
@@ -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";
@@ -16313,7 +16343,7 @@ tags.forEach(function(tagName) {
 // src/views/Workflows/Creator/Modals/Preview/Modal.tsx
 import {
   Button as Button23,
-  DesignToken as DesignToken31,
+  DesignToken as DesignToken32,
   Modal as Modal6,
   ModalHeader as ModalHeader4,
   RadiusToken as RadiusToken15,
@@ -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,
@@ -16330,7 +16360,7 @@ import ReactFlow, {
   useEdgesState,
   useNodesState
 } from "reactflow";
-import { DesignToken as DesignToken30 } from "@livechat/design-system-react-components";
+import { DesignToken as DesignToken31 } from "@livechat/design-system-react-components";
 
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/Add/Task/Task.tsx
 import { memo } from "react";
@@ -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,12 +17743,14 @@ 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 { Picker } from "@livechat/design-system-react-components";
-var pickerCustomStyles = css`
+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;
   button {
-    color: var(--content-basic-primary);
+    color: var(
+      ${readonly ? DesignToken11.ContentBasicDisabled : DesignToken11.ContentBasicPrimary}
+    );
   }
 `;
 function PredefinedCustomStringField(props) {
@@ -17727,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;
     }
@@ -17740,7 +17771,7 @@ function PredefinedCustomStringField(props) {
   return /* @__PURE__ */ jsx4(
     Picker,
     {
-      css: pickerCustomStyles,
+      css: pickerCustomStyles(props.readonly),
       disabled: props.readonly,
       error: Boolean((_a = props.rawErrors) == null ? void 0 : _a.length),
       hideClearButton: true,
@@ -17763,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",
@@ -17789,8 +17832,10 @@ function CustomStringField(props) {
           }
         ) }),
         onClick: () => {
-          onChange(null);
-          setIsPredefinedMode(true);
+          handleChange("");
+          setTimeout(() => {
+            setIsPredefinedMode(true);
+          }, 50);
         }
       } : void 0,
       {
@@ -17807,34 +17852,60 @@ 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,
       {
         options: modeSelectorOptions,
         selectedOptions: [isPredefinedMode ? "predefined" : "custom"],
-        triggerRenderer: /* @__PURE__ */ jsx4(Button11, { icon: /* @__PURE__ */ jsx4(Icon9, { source: MoreHoriz }), kind: "secondary" })
+        triggerRenderer: /* @__PURE__ */ jsx4(
+          Button11,
+          {
+            disabled: props.readonly,
+            icon: /* @__PURE__ */ jsx4(Icon9, { source: MoreHoriz }),
+            kind: "secondary"
+          }
+        )
       }
     )
   ] });
@@ -17862,6 +17933,7 @@ function CustomAddButton(props) {
       onClick: (e) => {
         onClick && onClick(e);
       },
+      disabled: props.disabled,
       size: "medium",
       children: "Add property"
     }
@@ -17880,6 +17952,7 @@ function CustomRemoveButton(props) {
       `,
       icon: /* @__PURE__ */ jsx4(Icon10, { source: Delete }),
       kind: "text",
+      disabled: props.disabled,
       onClick: (e) => {
         onClick && onClick(e);
       }
@@ -17899,6 +17972,7 @@ function CustomMoveUpButton(props) {
       `,
       icon: /* @__PURE__ */ jsx4(Icon10, { source: ArrowUpward }),
       kind: "text",
+      disabled: props.disabled,
       onClick: (e) => {
         onClick && onClick(e);
       }
@@ -17918,6 +17992,7 @@ function CustomMoveDownButton(props) {
       `,
       icon: /* @__PURE__ */ jsx4(Icon10, { source: ArrowDownward }),
       kind: "text",
+      disabled: props.disabled,
       onClick: (e) => {
         onClick && onClick(e);
       }
@@ -17931,7 +18006,7 @@ import { getTemplate as getTemplate2, getUiOptions as getUiOptions2 } from "@rjs
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Templates/Other/CustomArrayFieldHeader.tsx
 import { getTemplate, getUiOptions } from "@rjsf/utils";
 import {
-  DesignToken as DesignToken11,
+  DesignToken as DesignToken12,
   SpacingToken as SpacingToken13
 } from "@livechat/design-system-react-components";
 import { Row as Row8 } from "@livechat/developer-studio-ui-react";
@@ -17984,7 +18059,7 @@ function CustomArrayFieldHeader(props) {
               font-size: 13px;
               font-weight: 400;
               line-height: 16px;
-              color: var(${DesignToken11.ContentBasicSecondary});
+              color: var(${DesignToken12.ContentBasicSecondary});
             `,
             children: "optional"
           }
@@ -18102,7 +18177,7 @@ import {
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Templates/Other/CustomFieldHeader.tsx
 import { descriptionId as descriptionId2, getTemplate as getTemplate3, getUiOptions as getUiOptions3, titleId as titleId2 } from "@rjsf/utils";
 import {
-  DesignToken as DesignToken12,
+  DesignToken as DesignToken13,
   SpacingToken as SpacingToken14
 } from "@livechat/design-system-react-components";
 import { Row as Row9 } from "@livechat/developer-studio-ui-react";
@@ -18110,7 +18185,7 @@ var OptionalWrapper = newStyled.div`
   font-size: 13px;
   font-weight: 400;
   line-height: 16px;
-  color: var(${DesignToken12.ContentBasicSecondary});
+  color: var(${DesignToken13.ContentBasicSecondary});
 `;
 function CustomFieldHeader(props) {
   const {
@@ -18306,7 +18381,7 @@ function CustomWrapIfAdditionalTemplate(props) {
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Templates/CustomObjectField.tsx
 import { useState as useState13 } from "react";
 import { ADDITIONAL_PROPERTY_FLAG as ADDITIONAL_PROPERTY_FLAG3, canExpand } from "@rjsf/utils";
-import { Button as Button13, DesignToken as DesignToken13 } from "@livechat/design-system-react-components";
+import { Button as Button13, DesignToken as DesignToken14 } from "@livechat/design-system-react-components";
 function CustomObjectFieldTemplate(props) {
   const {
     description,
@@ -18371,7 +18446,7 @@ function CustomObjectFieldTemplate(props) {
           Button13,
           {
             css: css`
-              color: var(${DesignToken13.ContentBasicPrimary});
+              color: var(${DesignToken14.ContentBasicPrimary});
             `,
             kind: "link-light",
             onClick: () => {
@@ -18692,7 +18767,7 @@ var CustomToolbar_default = Toolbar_default;
 
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/Custom.tsx
 import {
-  DesignToken as DesignToken14,
+  DesignToken as DesignToken15,
   RadiusToken as RadiusToken6
 } from "@livechat/design-system-react-components";
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -18702,8 +18777,8 @@ var Wrapper2 = newStyled.div`
 
     .react-flow__handle {
       transition: background-color 0.15s ease-in-out 0s;
-      background: var(${DesignToken14.SurfacePrimaryDefault}) !important;
-      border: 1px solid var(${DesignToken14.BorderBasicPrimary}) !important;
+      background: var(${DesignToken15.SurfacePrimaryDefault}) !important;
+      border: 1px solid var(${DesignToken15.BorderBasicPrimary}) !important;
       pointer-events: all;
       cursor: pointer;
       border-radius: var(${RadiusToken6[1]}) !important;
@@ -18796,7 +18871,7 @@ var Node_default = memo4(ForkJoinNode);
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/HttpNode/Base.tsx
 import { Automation } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken15,
+  DesignToken as DesignToken16,
   Icon as Icon14,
   RadiusToken as RadiusToken7,
   ShadowToken as ShadowToken2,
@@ -18805,10 +18880,10 @@ import {
 import { IntegrationNames as IntegrationNames15 } from "@livechat/developer-studio-api";
 import { Column as Column7 } from "@livechat/developer-studio-ui-react";
 var Node2 = newStyled.div`
-  color: var(${DesignToken15.ContentBasicPrimary});
-  background-color: ${({ editing }) => editing ? `var(${DesignToken15.SurfacePrimaryActive})` : `var(${DesignToken15.SurfacePrimaryDefault})`};
+  color: var(${DesignToken16.ContentBasicPrimary});
+  background-color: ${({ editing }) => editing ? `var(${DesignToken16.SurfacePrimaryActive})` : `var(${DesignToken16.SurfacePrimaryDefault})`};
   border: 1px solid
-    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken15.BorderBasicNegative})` : editing ? `var(${DesignToken15.ActionPrimaryDefault})` : `var(${DesignToken15.BorderBasicSecondary})`};
+    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken16.BorderBasicNegative})` : editing ? `var(${DesignToken16.ActionPrimaryDefault})` : `var(${DesignToken16.BorderBasicSecondary})`};
   border-radius: var(${RadiusToken7[3]});
   width: ${DEFAULT_NODE_WIDTH.HTTP}px;
 
@@ -18820,7 +18895,7 @@ var Node2 = newStyled.div`
   transition: 0.15s ease-in-out 0s;
 
   &:hover {
-    background: var(${DesignToken15.SurfacePrimaryHover});
+    background: var(${DesignToken16.SurfacePrimaryHover});
     box-shadow: var(${ShadowToken2.Float});
   }
 `;
@@ -18927,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,
@@ -18946,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,
@@ -18961,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();
@@ -18972,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: [
@@ -19048,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 ? {
@@ -19122,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(
@@ -19171,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), {
@@ -19193,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), {
@@ -19298,17 +19365,17 @@ var Node_default2 = memo5(HttpNode);
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/JoinNode/Base.tsx
 import { DirectionsSignOff } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken16,
+  DesignToken as DesignToken17,
   Icon as Icon16,
   RadiusToken as RadiusToken8,
   ShadowToken as ShadowToken3,
   SpacingToken as SpacingToken19
 } from "@livechat/design-system-react-components";
 var Node3 = newStyled.div`
-  color: var(${DesignToken16.ContentBasicPrimary});
-  background-color: ${({ editing }) => editing ? `var(${DesignToken16.SurfacePrimaryActive})` : `var(${DesignToken16.Background01})`};
+  color: var(${DesignToken17.ContentBasicPrimary});
+  background-color: ${({ editing }) => editing ? `var(${DesignToken17.SurfacePrimaryActive})` : `var(${DesignToken17.Background01})`};
   border: 1px solid
-    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken16.BorderBasicNegative})` : editing ? `var(${DesignToken16.ActionPrimaryDefault})` : `var(${DesignToken16.BorderBasicSecondary})`};
+    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken17.BorderBasicNegative})` : editing ? `var(${DesignToken17.ActionPrimaryDefault})` : `var(${DesignToken17.BorderBasicSecondary})`};
   border-radius: var(${RadiusToken8[3]});
   width: ${DEFAULT_NODE_WIDTH.JOIN}px;
 
@@ -19320,7 +19387,7 @@ var Node3 = newStyled.div`
   transition: 0.15s ease-in-out 0s;
 
   &:hover {
-    background: var(${DesignToken16.SurfacePrimaryHover});
+    background: var(${DesignToken17.SurfacePrimaryHover});
     box-shadow: var(${ShadowToken3.Float});
   }
 `;
@@ -19458,17 +19525,17 @@ var Node_default3 = memo6(JoinNode);
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/SwitchNode/Base.tsx
 import { Channels } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken17,
+  DesignToken as DesignToken18,
   Icon as Icon17,
   RadiusToken as RadiusToken9,
   ShadowToken as ShadowToken4,
   SpacingToken as SpacingToken20
 } from "@livechat/design-system-react-components";
 var Node4 = newStyled.div`
-  color: var(${DesignToken17.ContentBasicPrimary});
-  background-color: ${({ editing }) => editing ? `var(${DesignToken17.SurfacePrimaryActive})` : `var(${DesignToken17.SurfacePrimaryDefault})`};
+  color: var(${DesignToken18.ContentBasicPrimary});
+  background-color: ${({ editing }) => editing ? `var(${DesignToken18.SurfacePrimaryActive})` : `var(${DesignToken18.SurfacePrimaryDefault})`};
   border: 1px solid
-    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken17.BorderBasicNegative})` : editing ? `var(${DesignToken17.ActionPrimaryDefault})` : `var(${DesignToken17.BorderBasicSecondary})`};
+    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken18.BorderBasicNegative})` : editing ? `var(${DesignToken18.ActionPrimaryDefault})` : `var(${DesignToken18.BorderBasicSecondary})`};
   border-radius: var(${RadiusToken9[3]});
   width: ${({ source }) => source ? `${DEFAULT_NODE_WIDTH.default}px` : `${DEFAULT_NODE_WIDTH.SWITCH}px`};
   height: ${DEFAULT_NODE_HEIGHT.SWITCH}px;
@@ -19480,7 +19547,7 @@ var Node4 = newStyled.div`
   transition: 0.15s ease-in-out 0s;
 
   &:hover {
-    background: var(${DesignToken17.SurfacePrimaryHover});
+    background: var(${DesignToken18.SurfacePrimaryHover});
     box-shadow: var(${ShadowToken4.Float});
   }
 `;
@@ -19599,7 +19666,7 @@ var Form_default5 = SwitchNodeForm;
 import { memo as memo7, useState as useState17 } from "react";
 import { Handle as Handle5, Position as Position7 } from "reactflow";
 import {
-  DesignToken as DesignToken18,
+  DesignToken as DesignToken19,
   ShadowToken as ShadowToken5
 } from "@livechat/design-system-react-components";
 var handlerWrapperCss = css`
@@ -19609,7 +19676,7 @@ var handlerWrapperCss = css`
 
   &:hover {
     > div:nth-of-type(3) {
-      background: var(${DesignToken18.SurfacePrimaryHover});
+      background: var(${DesignToken19.SurfacePrimaryHover});
       box-shadow: var(${ShadowToken5.Float});
     }
   }
@@ -19711,7 +19778,7 @@ var Node_default4 = memo7(SwitchNode);
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/TerminateNode/Base.tsx
 import { ArrowBarToRight } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken19,
+  DesignToken as DesignToken20,
   Icon as Icon18,
   ShadowToken as ShadowToken6,
   SpacingToken as SpacingToken21
@@ -19719,10 +19786,10 @@ import {
 import { Column as Column10 } from "@livechat/developer-studio-ui-react";
 import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var Node5 = newStyled.div`
-  color: var(${DesignToken19.ContentBasicPrimary});
-  background-color: ${({ editing }) => editing ? `var(${DesignToken19.SurfacePrimaryActive})` : `var(${DesignToken19.SurfacePrimaryDefault})`};
+  color: var(${DesignToken20.ContentBasicPrimary});
+  background-color: ${({ editing }) => editing ? `var(${DesignToken20.SurfacePrimaryActive})` : `var(${DesignToken20.SurfacePrimaryDefault})`};
   border: 1px solid
-    ${({ hasErrors }) => !hasErrors ? `var(${DesignToken19.BorderBasicSecondary})` : `var(${DesignToken19.BorderBasicNegative})`};
+    ${({ hasErrors }) => !hasErrors ? `var(${DesignToken20.BorderBasicSecondary})` : `var(${DesignToken20.BorderBasicNegative})`};
   border-radius: 50%;
   width: ${DEFAULT_NODE_WIDTH.TERMINATE}px;
   height: ${DEFAULT_NODE_HEIGHT.TERMINATE}px;
@@ -19733,7 +19800,7 @@ var Node5 = newStyled.div`
   position: relative;
   transition: 0.15s ease-in-out 0s;
   &:hover {
-    background: var(${DesignToken19.SurfacePrimaryHover});
+    background: var(${DesignToken20.SurfacePrimaryHover});
     box-shadow: var(${ShadowToken6.Float});
   }
 `;
@@ -19872,17 +19939,17 @@ var Node_default5 = memo8(TerminateNode);
 
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/TriggerNode/Base.tsx
 import {
-  DesignToken as DesignToken20,
+  DesignToken as DesignToken21,
   ShadowToken as ShadowToken7,
   SpacingToken as SpacingToken22
 } from "@livechat/design-system-react-components";
 import { IntegrationNames as IntegrationNames17 } from "@livechat/developer-studio-api";
 import { Column as Column11 } from "@livechat/developer-studio-ui-react";
 var Node6 = newStyled.div`
-  color: var(${DesignToken20.ContentBasicPrimary});
-  background-color: ${({ editing }) => editing ? `var(${DesignToken20.SurfacePrimaryActive})` : `var(${DesignToken20.SurfacePrimaryDefault})`};
+  color: var(${DesignToken21.ContentBasicPrimary});
+  background-color: ${({ editing }) => editing ? `var(${DesignToken21.SurfacePrimaryActive})` : `var(${DesignToken21.SurfacePrimaryDefault})`};
   border: 1px solid
-    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken20.BorderBasicNegative})` : editing ? `var(${DesignToken20.ActionPrimaryDefault})` : `var(${DesignToken20.BorderBasicSecondary})`};
+    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken21.BorderBasicNegative})` : editing ? `var(${DesignToken21.ActionPrimaryDefault})` : `var(${DesignToken21.BorderBasicSecondary})`};
   border-radius: 50px;
   width: ${DEFAULT_NODE_WIDTH.HTTP}px;
 
@@ -19895,7 +19962,7 @@ var Node6 = newStyled.div`
   padding: 0 var(${SpacingToken22.Spacing3});
 
   &:hover {
-    background: var(${DesignToken20.SurfacePrimaryHover});
+    background: var(${DesignToken21.SurfacePrimaryHover});
     box-shadow: var(${ShadowToken7.Float});
   }
 `;
@@ -19988,34 +20055,34 @@ var Base_default6 = TriggerNodeBase;
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/TriggerNode/Form.tsx
 import { useState as useState19 } from "react";
 import { Cron } from "react-js-cron";
-import { DesignToken as DesignToken21 } from "@livechat/design-system-react-components";
+import { DesignToken as DesignToken22 } from "@livechat/design-system-react-components";
 var cronCss = css`
   width: 100%;
 
   .ant-select {
-    color: var(${DesignToken21.ContentBasicPrimary}) !important;
+    color: var(${DesignToken22.ContentBasicPrimary}) !important;
   }
 
   .ant-select-open .ant-select-selection-item {
-    color: var(${DesignToken21.ContentBasicPrimary}) !important;
+    color: var(${DesignToken22.ContentBasicPrimary}) !important;
   }
 
   .ant-select-selector {
-    color: var(${DesignToken21.ContentBasicPrimary}) !important;
-    border: 1px solid var(${DesignToken21.BorderBasicPrimary}) !important;
-    background: var(${DesignToken21.SurfacePrimaryDefault}) !important;
+    color: var(${DesignToken22.ContentBasicPrimary}) !important;
+    border: 1px solid var(${DesignToken22.BorderBasicPrimary}) !important;
+    background: var(${DesignToken22.SurfacePrimaryDefault}) !important;
 
     &:hover {
-      border-color: var(${DesignToken21.BorderBasicHover}) !important;
+      border-color: var(${DesignToken22.BorderBasicHover}) !important;
     }
   }
 
   svg {
-    fill: var(${DesignToken21.ContentBasicPrimary}) !important;
+    fill: var(${DesignToken22.ContentBasicPrimary}) !important;
   }
 
   .ant-select-item {
-    color: var(${DesignToken21.ContentBasicPrimary}) !important;
+    color: var(${DesignToken22.ContentBasicPrimary}) !important;
   }
 
   .react-js-cron-clear-button {
@@ -20157,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,
@@ -20167,7 +20234,7 @@ import {
   ZoomOut
 } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken27,
+  DesignToken as DesignToken28,
   Icon as Icon25,
   Popover,
   RadiusToken as RadiusToken13
@@ -20180,12 +20247,12 @@ import { Button as Button16, Icon as Icon19 } from "@livechat/design-system-reac
 
 // src/views/Workflows/Common/One/widget/message-box/styles.ts
 import {
-  DesignToken as DesignToken22,
+  DesignToken as DesignToken23,
   RadiusToken as RadiusToken10,
   SpacingToken as SpacingToken23
 } from "@livechat/design-system-react-components";
 var popoverMessageBox = css`
-  border-top: 1px solid var(${DesignToken22.BorderBasicSecondary});
+  border-top: 1px solid var(${DesignToken23.BorderBasicSecondary});
 `;
 var contentEditable = css`
   max-height: calc(100% - 32px);
@@ -20195,7 +20262,7 @@ var contentEditable = css`
   line-height: 21px;
   font-size: 16px;
   outline: none;
-  color: var(${DesignToken22.ContentBasicPrimary});
+  color: var(${DesignToken23.ContentBasicPrimary});
   margin-right: var(${SpacingToken23.Spacing1});
   white-space: pre !important;
   -ms-overflow-style: none;
@@ -20203,7 +20270,7 @@ var contentEditable = css`
   -webkit-scrollbar: none;
 
   &:focus-visible {
-    border-color: var(${DesignToken22.BorderDefault});
+    border-color: var(${DesignToken23.BorderDefault});
   }
 
   p {
@@ -20224,7 +20291,7 @@ var messageBoxWrapper = css`
   }
 `;
 var placeholder = css`
-  color: var(${DesignToken22.ContentBasicDisabled});
+  color: var(${DesignToken23.ContentBasicDisabled});
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
@@ -20269,16 +20336,16 @@ var messageBoxTip = css`
   font-size: 14px;
   line-height: 24px;
   gap: var(${SpacingToken23.Spacing2});
-  color: var(${DesignToken22.ContentBasicDisabled});
+  color: var(${DesignToken23.ContentBasicDisabled});
 
   strong {
     width: 24px;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: var(${DesignToken22.ContentBasicPrimary});
+    color: var(${DesignToken23.ContentBasicPrimary});
     border-radius: var(${RadiusToken10[3]});
-    background-color: var(${DesignToken22.SurfaceSecondaryDefault});
+    background-color: var(${DesignToken23.SurfaceSecondaryDefault});
   }
 `;
 
@@ -20304,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,
@@ -20313,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
@@ -20323,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);
@@ -20340,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) {
@@ -20365,7 +20432,7 @@ function AskButton() {
   const isLoading = false;
   const { isAboveLimit } = useAboveCharacterLimit();
   const handleSend = useSendOneMessage();
-  useEffect11(() => {
+  useEffect12(() => {
     const registerTextContentListener = editor.registerTextContentListener(
       (textContent) => {
         setIsDisabled(!textContent);
@@ -20439,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) => {
@@ -20529,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,
@@ -20540,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);
     }
@@ -20559,7 +20626,7 @@ var useScroll = ({
       }
     };
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     var _a;
     if (!oneScrollPosition) {
       scrollToBottom();
@@ -20568,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) {
@@ -20602,14 +20669,14 @@ import { Button as Button18, Icon as Icon20, Text as Text10 } from "@livechat/de
 
 // src/views/Workflows/Common/One/widget/events/styles.ts
 import {
-  DesignToken as DesignToken24,
+  DesignToken as DesignToken25,
   RadiusToken as RadiusToken12,
   SpacingToken as SpacingToken25
 } from "@livechat/design-system-react-components";
 
 // src/views/Workflows/Common/One/widget/styles.ts
 import {
-  DesignToken as DesignToken23,
+  DesignToken as DesignToken24,
   RadiusToken as RadiusToken11,
   ShadowToken as ShadowToken8,
   SpacingToken as SpacingToken24
@@ -20633,7 +20700,7 @@ var loaderText = css`
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
-  color: var(${DesignToken23.ContentBasicDisabled});
+  color: var(${DesignToken24.ContentBasicDisabled});
 `;
 var relativeContainer = css`
   position: relative;
@@ -20650,11 +20717,11 @@ var typingIndicator = css`
   span {
     width: 4px;
     height: 4px;
-    background-color: var(${DesignToken23.ContentBasicDisabled});
+    background-color: var(${DesignToken24.ContentBasicDisabled});
   }
 `;
 var selected = css`
-  background-color: var(${DesignToken23.SurfacePrimaryActive});
+  background-color: var(${DesignToken24.SurfacePrimaryActive});
 `;
 var wrapper = css`
   ${resetLegacyLcBorderBox};
@@ -20675,13 +20742,13 @@ var wrapper = css`
   }
 
   &:hover {
-    background-color: var(${DesignToken23.SurfacePrimaryHover});
+    background-color: var(${DesignToken24.SurfacePrimaryHover});
     cursor: pointer;
   }
 `;
 var textWrapper = css`
   width: calc(100% - 2 * ${SIDE_PADDING}px - 2 * ${SIDE_MARGIN}px);
-  color: var(${DesignToken23.ContentBasicPrimary});
+  color: var(${DesignToken24.ContentBasicPrimary});
 `;
 var lastEventWrapper = css`
   display: flex;
@@ -20695,7 +20762,7 @@ var text = css`
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: normal;
-  color: var(${DesignToken23.ContentBasicSecondary});
+  color: var(${DesignToken24.ContentBasicSecondary});
 `;
 var chatFeed = css`
   display: flex;
@@ -20710,14 +20777,14 @@ var undreadMessageCount = css`
   min-width: 18px;
   font-size: 12px;
   border-radius: 50%;
-  color: var(${DesignToken23.ContentLockedWhite});
-  background-color: var(${DesignToken23.SurfaceAccentEmphasisHighNegative});
+  color: var(${DesignToken24.ContentLockedWhite});
+  background-color: var(${DesignToken24.SurfaceAccentEmphasisHighNegative});
   margin: 0 6px;
   text-align: center;
   font-weight: bold;
 `;
 var unreadMessageText = css`
-  color: var(${DesignToken23.ContentBasicSecondary});
+  color: var(${DesignToken24.ContentBasicSecondary});
   flex-grow: 1;
   font-size: 13px;
 `;
@@ -20725,7 +20792,7 @@ var loaderContainer = css`
   height: 100%;
 `;
 var loaderChatItem = css`
-  background-color: var(${DesignToken23.SurfaceSecondaryDisabled});
+  background-color: var(${DesignToken24.SurfaceSecondaryDisabled});
   width: 325px;
   padding: 15px;
   display: flex;
@@ -20744,7 +20811,7 @@ var container = () => css`
   width: 360px;
   height: auto;
   max-height: 75%;
-  color: var(${DesignToken23.ContentBasicPrimary});
+  color: var(${DesignToken24.ContentBasicPrimary});
 `;
 var headerWrapper = css`
   display: flex;
@@ -20774,7 +20841,7 @@ var headerWrapperExpanded = css`
   ${headerWrapper};
   box-sizing: border-box;
   height: 64px;
-  border-bottom: 1px solid var(${DesignToken23.BorderBasicTertiary});
+  border-bottom: 1px solid var(${DesignToken24.BorderBasicTertiary});
 
   > div:first-of-type {
     padding: 0 4px;
@@ -20785,7 +20852,7 @@ var oneLogo = css`
   display: inline-flex;
 `;
 var activeDetailsButton = css`
-  background-color: var(${DesignToken23.SurfaceOpacityBasicActive});
+  background-color: var(${DesignToken24.SurfaceOpacityBasicActive});
 `;
 var icon = css`
   color: white;
@@ -20801,13 +20868,13 @@ var scrollbar = `
   }
 
   ::-webkit-scrollbar-track {
-    background: var(${DesignToken23.SurfacePrimaryDefault});
+    background: var(${DesignToken24.SurfacePrimaryDefault});
   }
 
   ::-webkit-scrollbar-thumb {
-    background: var(${DesignToken23.SurfaceModerateDefault});
+    background: var(${DesignToken24.SurfaceModerateDefault});
     border-radius: 8px;
-    box-shadow: inset 0 0 0 3px var(${DesignToken23.SurfacePrimaryDefault});
+    box-shadow: inset 0 0 0 3px var(${DesignToken24.SurfacePrimaryDefault});
   }
 `;
 var scroller = css`
@@ -20903,7 +20970,7 @@ var loaderBubble = css`
   width: 41px;
   height: 46px;
   padding: var(${SpacingToken25.Spacing3});
-  color: var(${DesignToken24.ContentBasicPrimary});
+  color: var(${DesignToken25.ContentBasicPrimary});
   border-radius: var(${RadiusToken12[4]});
   background: linear-gradient(
     254.49deg,
@@ -20918,7 +20985,7 @@ var bubble = css`
   font-size: 14px;
   line-height: 1.5em;
   word-break: break-word;
-  color: var(${DesignToken24.ContentBasicPrimary});
+  color: var(${DesignToken25.ContentBasicPrimary});
   background: linear-gradient(
     254.49deg,
     rgb(187 154 255 / 18%) -0.38%,
@@ -20932,7 +20999,7 @@ var eventWrapper = (isAgentMessage) => css`
   align-items: ${isAgentMessage ? "center" : "flex-start"};
   justify-content: ${isAgentMessage ? "flex-end" : "flex-start"};
   margin: 2px;
-  color: ${isAgentMessage ? `var(${DesignToken24.ContentLockedWhite})` : `var(${DesignToken24.ContentBasicPrimary})`};
+  color: ${isAgentMessage ? `var(${DesignToken25.ContentLockedWhite})` : `var(${DesignToken25.ContentBasicPrimary})`};
 `;
 var eventText = css`
   padding: var(${SpacingToken25.Spacing3}) var(${SpacingToken25.Spacing5});
@@ -21016,7 +21083,7 @@ var agentMessage = css`
   font-style: normal;
   font-weight: 600;
   line-height: 24px;
-  color: var(${DesignToken24.ContentBasicPrimary});
+  color: var(${DesignToken25.ContentBasicPrimary});
   width: 100%;
 `;
 var taskList = css`
@@ -21041,8 +21108,8 @@ var linkContainer = (type = "api_call") => css`
   margin-bottom: var(${SpacingToken25.Spacing2});
 
   span {
-    color: var(${DesignToken24.ContentBasicPrimary});
-    background-color: ${type === "url" ? `var(${DesignToken24.SurfacePrimaryActiveColored})` : `var(${DesignToken24.SurfaceTertiaryDefault})`};
+    color: var(${DesignToken25.ContentBasicPrimary});
+    background-color: ${type === "url" ? `var(${DesignToken25.SurfacePrimaryActiveColored})` : `var(${DesignToken25.SurfaceTertiaryDefault})`};
     width: 24px;
     height: 24px;
     padding: var(${SpacingToken25.Spacing1});
@@ -21058,10 +21125,10 @@ var sourcesContainer = css`
   align-items: center;
 `;
 var sourcesBadgeActive = css`
-  color: var(${DesignToken24.ContentBasicPrimary});
+  color: var(${DesignToken25.ContentBasicPrimary});
 `;
 var sourcesButtonActive = css`
-  color: var(${DesignToken24.ContentBasicPrimary});
+  color: var(${DesignToken25.ContentBasicPrimary});
 `;
 var sourcesList = css`
   margin: var(${SpacingToken25.Spacing3}) 0 0 var(${SpacingToken25.Spacing7});
@@ -21076,7 +21143,7 @@ var sourcesButton = css`
   border-radius: var(${RadiusToken12[3]});
   padding: var(${SpacingToken25.Spacing05}) var(${SpacingToken25.Spacing2})
     var(${SpacingToken25.Spacing05}) 6px;
-  color: var(${DesignToken24.ContentBasicSecondary});
+  color: var(${DesignToken25.ContentBasicSecondary});
   margin-top: var(${SpacingToken25.Spacing05});
 
   &:hover {
@@ -21090,13 +21157,13 @@ var button = css`
   margin: 0;
 
   svg {
-    color: var(${DesignToken24.ContentBasicSecondary});
+    color: var(${DesignToken25.ContentBasicSecondary});
   }
 
   &:hover {
     cursor: pointer;
     svg {
-      color: var(${DesignToken24.ContentBasicPrimary});
+      color: var(${DesignToken25.ContentBasicPrimary});
     }
   }
 `;
@@ -21142,10 +21209,10 @@ 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 DesignToken25 } from "@livechat/design-system-react-components";
+import { DesignToken as DesignToken26 } from "@livechat/design-system-react-components";
 var shine = keyframes`
   0% {
     background-position: 100% 50%;
@@ -21156,7 +21223,7 @@ var shine = keyframes`
   }
 `;
 var skeletonLine = css`
-  background: var(${DesignToken25.SurfaceSecondaryDisabled});
+  background: var(${DesignToken26.SurfaceSecondaryDisabled});
   width: 35%;
   height: 12px;
   border-radius: 6px;
@@ -21206,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 = () => {
@@ -21229,7 +21296,7 @@ function OneImageEvent({ imageUrl }) {
 
 // src/views/Workflows/Common/One/components/TypingIndicator.tsx
 import { memo as memo10 } from "react";
-import { DesignToken as DesignToken26 } from "@livechat/design-system-react-components";
+import { DesignToken as DesignToken27 } from "@livechat/design-system-react-components";
 var typingAnimation = keyframes`
 	0% {
 		opacity: 0.2;
@@ -21253,7 +21320,7 @@ var typingIndicator2 = css`
     animation-duration: 1.4s;
     animation-iteration-count: infinite;
     animation-fill-mode: both;
-    background-color: var(${DesignToken26.ContentBasicPrimary});
+    background-color: var(${DesignToken27.ContentBasicPrimary});
     border-radius: 50%;
     display: block;
     height: 3px;
@@ -21357,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,
@@ -21379,7 +21446,7 @@ function NavigateButton({
   kind,
   iconPosition
 }) {
-  const navigate = useNavigate6();
+  const navigate = useNavigate7();
   const handleButtonClick = () => {
     if (isExternal) {
       window.open(url, "_blank");
@@ -21811,7 +21878,7 @@ function OneChatFeedContent({
   updateWorkflow,
   previewWorkflow
 }) {
-  const oneChatFeedRef = useRef7(null);
+  const oneChatFeedRef = useRef8(null);
   const { groupedEvents, hasAdditionalEvents } = useOneMessagesContext();
   const { handleScroll } = useScroll({
     oneChatFeedRef,
@@ -21906,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) {
@@ -21930,7 +21997,7 @@ function CustomControls({
         css: css`
               max-width: 360px;
               border-radius: var(${RadiusToken13[4]});
-              background-color: var(${DesignToken27.SurfacePrimaryDefault});
+              background-color: var(${DesignToken28.SurfacePrimaryDefault});
             `,
         floatingStrategy: "fixed",
         isVisible: isOpen,
@@ -22020,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";
@@ -22032,7 +22099,7 @@ function SwitcherControls({
   const [currentView, setCurrentView] = useState26(
     isDraft ? "draft" : "published"
   );
-  const navigate = useNavigate8();
+  const navigate = useNavigate9();
   const {
     focus,
     state: { visibility }
@@ -22116,7 +22183,7 @@ import {
   getSmoothStepPath
 } from "reactflow";
 import {
-  DesignToken as DesignToken28,
+  DesignToken as DesignToken29,
   RadiusToken as RadiusToken14
 } from "@livechat/design-system-react-components";
 var CustomEdge = ({
@@ -22151,7 +22218,7 @@ var CustomEdge = ({
               position: absolute;
               transform: translate(-50%, -100%)
                 translate(${targetX}px, ${targetY - 10}px);
-              background: ${typeof data.label === "object" ? "transparent" : `var(${DesignToken28.SurfaceTertiaryDefault})`};
+              background: ${typeof data.label === "object" ? "transparent" : `var(${DesignToken29.SurfaceTertiaryDefault})`};
               padding: 0 8px;
               border-radius: var(${RadiusToken14[3]});
               font-size: 13px;
@@ -22170,7 +22237,7 @@ var Edges_default = CustomEdge_default;
 // src/views/Workflows/Creator/Builder/utils.ts
 import { MarkerType } from "reactflow";
 import ElkConstructor from "elkjs";
-import { DesignToken as DesignToken29 } from "@livechat/design-system-react-components";
+import { DesignToken as DesignToken30 } from "@livechat/design-system-react-components";
 import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType13 } from "@livechat/developer-studio-api";
 var elk = new ElkConstructor({
   defaultLayoutOptions: {
@@ -22203,11 +22270,11 @@ var buildEdge = ({
       type: MarkerType.ArrowClosed,
       width: 10,
       height: 10,
-      color: `var(${DesignToken29.ContentBasicDisabled})`
+      color: `var(${DesignToken30.ContentBasicDisabled})`
     },
     style: {
       strokeWidth: 2,
-      stroke: `var(${DesignToken29.ContentBasicDisabled})`,
+      stroke: `var(${DesignToken30.ContentBasicDisabled})`,
       zIndex: 9999
     }
   };
@@ -22561,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
@@ -22636,7 +22703,7 @@ function WorkflowBuilder() {
           /* @__PURE__ */ jsx14(
             Background,
             {
-              color: `var(${DesignToken30.SurfaceSecondaryActive})`,
+              color: `var(${DesignToken31.SurfaceSecondaryActive})`,
               size: 2,
               variant: BackgroundVariant.Dots
             }
@@ -22671,7 +22738,7 @@ var WorkflowBuilderWrapper = newStyled.div`
   min-height: 400px;
   max-height: 100%;
   border-radius: var(${RadiusToken15.Radius3});
-  background-color: var(${DesignToken31.SurfaceSecondaryDefault});
+  background-color: var(${DesignToken32.SurfaceSecondaryDefault});
 
   > div {
     height: 400px !important;
@@ -22699,8 +22766,8 @@ function PreviewWorkflowModal({
   onApply,
   onClose
 }) {
-  const navigate = useNavigate9();
-  const handleClose = useCallback13(
+  const navigate = useNavigate10();
+  const handleClose = useCallback16(
     (target) => {
       if (onClose) {
         onClose();
@@ -22714,7 +22781,7 @@ function PreviewWorkflowModal({
     },
     [onClose, navigate]
   );
-  const handleApply = useCallback13(() => {
+  const handleApply = useCallback16(() => {
     if (onApply) {
       onApply();
     }
@@ -22790,7 +22857,7 @@ var Modal_default4 = PreviewWorkflowModalWrapper;
 import { Error as Error5 } from "@livechat/design-system-icons";
 import {
   Button as Button24,
-  DesignToken as DesignToken32,
+  DesignToken as DesignToken33,
   Icon as Icon26,
   Modal as Modal7
 } from "@livechat/design-system-react-components";
@@ -22805,43 +22872,60 @@ 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(${DesignToken32.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 {
-  DesignToken as DesignToken38,
+  DesignToken as DesignToken39,
   RadiusToken as RadiusToken18,
   SpacingToken as SpacingToken35
 } from "@livechat/design-system-react-components";
@@ -22855,11 +22939,11 @@ 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,
-  DesignToken as DesignToken35,
+  DesignToken as DesignToken36,
   Heading as Heading3,
   Icon as Icon28,
   Loader as Loader2,
@@ -22876,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 DesignToken33,
+  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;
@@ -22889,7 +22976,7 @@ var tableCss = css`
 
   width: 100%;
   border-spacing: 0;
-  color: var(${DesignToken33.ContentBasicSecondary});
+  color: var(${DesignToken34.ContentBasicSecondary});
 
   th {
     text-transform: uppercase;
@@ -22914,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(${DesignToken33.SurfaceAccentEmphasisLowPositive})` : `var(${DesignToken33.SurfaceAccentEmphasisLowNegative})`};
-                      color: ${execution.status === "COMPLETED" ? `var(${DesignToken33.ContentBasicPositive})` : `var(${DesignToken33.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" }) }) })
@@ -22939,7 +23022,7 @@ var List_default = WorkflowExecutionList;
 
 // src/views/Workflows/Creator/Panels/Details/Info/Info.tsx
 import {
-  DesignToken as DesignToken34,
+  DesignToken as DesignToken35,
   SpacingToken as SpacingToken30,
   Text as Text15
 } from "@livechat/design-system-react-components";
@@ -22949,13 +23032,13 @@ import {
   Row as Row13
 } from "@livechat/developer-studio-ui-react";
 var Label = newStyled.div`
-  color: var(${DesignToken34.ContentBasicSecondary});
+  color: var(${DesignToken35.ContentBasicSecondary});
 `;
 var IconWrapper = newStyled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(${DesignToken34.SurfaceSecondaryDefault});
+  background-color: var(${DesignToken35.SurfaceSecondaryDefault});
   border-radius: 50%;
   width: var(${SpacingToken30.Spacing6});
   height: var(${SpacingToken30.Spacing6});
@@ -23017,7 +23100,7 @@ var WorkflowSidebar = newStyled.div`
   top: 0;
   display: flex;
   flex-direction: column;
-  background-color: var(${DesignToken35.SurfacePrimaryDefault});
+  background-color: var(${DesignToken36.SurfacePrimaryDefault});
   width: ${({ width }) => width != null ? width : "524px"};
   flex-shrink: 0;
   height: 100%;
@@ -23035,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(
@@ -23150,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 {
@@ -23182,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 = {
@@ -23259,7 +23342,7 @@ var Panel_default2 = WorkflowEditorPanel;
 import { Automation as Automation2, Close as Close5 } from "@livechat/design-system-icons";
 import {
   Button as Button27,
-  DesignToken as DesignToken36,
+  DesignToken as DesignToken37,
   Icon as Icon30,
   RadiusToken as RadiusToken17,
   ShadowToken as ShadowToken10,
@@ -23276,7 +23359,7 @@ var formCss = () => css`
 var Wrapper4 = newStyled.div`
   height: 100%;
   overflow: auto;
-  background-color: var(${DesignToken36.SurfacePrimaryDefault});
+  background-color: var(${DesignToken37.SurfacePrimaryDefault});
   border-radius: 0 var(${RadiusToken17[4]}) var(${RadiusToken17[4]}) 0;
   width: 524px;
   flex-shrink: 0;
@@ -23424,69 +23507,76 @@ 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,
   Button as Button28,
-  DesignToken as DesignToken37,
+  DesignToken as DesignToken38,
   FormField as FormField3,
   Icon as Icon31,
   Input as Input5,
@@ -23502,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,
@@ -23515,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, () => {
@@ -23615,7 +23705,7 @@ function WorkflowCreatorNavbar() {
                     css: css`
                   background: transparent;
                   border: none;
-                  color: var(${DesignToken37.ContentBasicPrimary});
+                  color: var(${DesignToken38.ContentBasicPrimary});
                   border-radius: 0;
                   padding: 0;
 
@@ -23624,18 +23714,18 @@ function WorkflowCreatorNavbar() {
                     font-size: 18px;
                     font-weight: 600;
                     line-height: 24px;
-                    color: var(${DesignToken37.ContentBasicPrimary});
+                    color: var(${DesignToken38.ContentBasicPrimary});
                     margin-bottom: 1px;
                     width: ${((_c = inputRef.current) == null ? void 0 : _c.value.length) || 5}ch;
                     max-width: 30ch;
 
                     &:disabled {
-                      color: var(${DesignToken37.ContentBasicPrimary});
+                      color: var(${DesignToken38.ContentBasicPrimary});
                     }
 
                     ${isNameChanging && css`
                       border-bottom: 1px solid
-                        var(${DesignToken37.ContentBasicPrimary});
+                        var(${DesignToken38.ContentBasicPrimary});
                       margin-bottom: 0;
                     `}
                   }
@@ -23697,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"
@@ -23708,7 +23799,7 @@ function WorkflowCreatorNavbar() {
                   {
                     css: css`
                 width: 1px;
-                background-color: var(${DesignToken37.BorderBasicSecondary});
+                background-color: var(${DesignToken38.BorderBasicSecondary});
                 height: 36px;
               `
                   }
@@ -23716,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."
@@ -23734,6 +23833,7 @@ function WorkflowCreatorNavbar() {
                       );
                       void publishDraft();
                     },
+                    "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.navbar.publishButton,
                     children: "Publish"
                   }
                 ) : /* @__PURE__ */ jsx4(
@@ -23749,6 +23849,7 @@ function WorkflowCreatorNavbar() {
                       }
                       void createDraft();
                     },
+                    "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.navbar.editButton,
                     children: "Edit"
                   }
                 )
@@ -23771,7 +23872,7 @@ var WorkflowCreatorContent = newStyled.div`
   display: flex;
   flex-flow: row nowrap;
   border-radius: var(${RadiusToken18.Radius4});
-  ${({ grayBackground }) => grayBackground ? `background-color: var(${DesignToken38.SurfaceSecondaryDefault})` : `background-color: var(${DesignToken38.SurfacePrimaryDefault})`};
+  ${({ grayBackground }) => grayBackground ? `background-color: var(${DesignToken39.SurfaceSecondaryDefault})` : `background-color: var(${DesignToken39.SurfacePrimaryDefault})`};
   margin: var(${SpacingToken35.Spacing4});
   width: calc(100% - var(${SpacingToken35.Spacing8}));
   height: calc(100% - var(${SpacingToken35.Spacing8}) - 70px);
@@ -23782,7 +23883,7 @@ function WorkflowCreatorView() {
     focus
   } = useWorkflowCreator();
   const { fitView } = useReactFlow3();
-  useEffect19(() => {
+  useEffect20(() => {
     if (getWorkflowsEnv("isLiveChatMode")) {
       sendMessage("closeSideNav" /* CloseSideNav */);
       const timeoutId = setTimeout(() => {
@@ -23826,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();
@@ -23967,23 +24068,23 @@ 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,
-  DesignToken as DesignToken40,
+  DesignToken as DesignToken41,
   Heading as Heading5,
   Icon as Icon33,
   Modal as Modal8,
   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 {
@@ -24001,7 +24102,7 @@ import {
   TargetArrow
 } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken39,
+  DesignToken as DesignToken40,
   Icon as Icon32,
   SpacingToken as SpacingToken36,
   Text as Text18
@@ -24020,7 +24121,7 @@ function WorkflowTemplateCategoryIcon(props) {
     /* @__PURE__ */ jsx4(
       Icon32,
       {
-        customColor: `var(${DesignToken39.ContentBasicSecondary})`,
+        customColor: `var(${DesignToken40.ContentBasicSecondary})`,
         size: "small",
         source: icons[props.category]
       }
@@ -24028,7 +24129,7 @@ function WorkflowTemplateCategoryIcon(props) {
     /* @__PURE__ */ jsx4(
       Text18,
       {
-        customColor: `var(${DesignToken39.ContentBasicSecondary})`,
+        customColor: `var(${DesignToken40.ContentBasicSecondary})`,
         noMargin: true,
         size: "xs",
         children: props.category
@@ -24047,7 +24148,7 @@ var WorkflowBuilderWrapper2 = newStyled.div`
   min-height: 400px;
   max-height: 100%;
   border-radius: var(${RadiusToken19.Radius3});
-  background-color: var(${DesignToken40.SurfaceSecondaryDefault});
+  background-color: var(${DesignToken41.SurfaceSecondaryDefault});
 
   > div {
     height: 400px !important;
@@ -24079,7 +24180,7 @@ function WorkflowTemplatePreviewModal({
   template,
   onClose
 }) {
-  const navigate = useNavigate14();
+  const navigate = useNavigate15();
   const {
     save,
     state: {
@@ -24090,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();
@@ -24109,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",
@@ -24213,7 +24314,7 @@ function WorkflowTemplatePreviewModal({
                     css: css`
                 margin-block-end: var(${SpacingToken37.Spacing1});
               `,
-                    customColor: `var(${DesignToken40.ContentBasicSecondary})`,
+                    customColor: `var(${DesignToken41.ContentBasicSecondary})`,
                     noMargin: true,
                     size: "xs",
                     children: "Products used:"
@@ -24236,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) {
@@ -24268,22 +24369,22 @@ 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 DesignToken42,
+  DesignToken as DesignToken43,
   SpacingToken as SpacingToken42,
   Text as Text20
 } from "@livechat/design-system-react-components";
 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,
@@ -24306,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: [
@@ -24361,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,
@@ -24384,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: [
@@ -24441,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,
@@ -24458,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
@@ -24490,9 +24591,9 @@ 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 DesignToken41,
+  DesignToken as DesignToken42,
   Heading as Heading7,
   SpacingToken as SpacingToken41
 } from "@livechat/design-system-react-components";
@@ -24501,7 +24602,7 @@ var IconWrapper2 = newStyled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(${DesignToken41.SurfaceSecondaryDefault});
+  background-color: var(${DesignToken42.SurfaceSecondaryDefault});
   border-radius: 50%;
   width: var(${SpacingToken41.Spacing7});
   height: var(${SpacingToken41.Spacing7});
@@ -24512,7 +24613,7 @@ function WorkflowTemplateCard({
   icons,
   category
 }) {
-  const navigate = useNavigate16();
+  const navigate = useNavigate17();
   return /* @__PURE__ */ jsx4(
     Card3,
     {
@@ -24558,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)
@@ -24638,7 +24739,7 @@ function WorkflowsHome({ isOnModal }) {
         /* @__PURE__ */ jsx4(Grid, { children: filteredTemplates.length === 0 ? /* @__PURE__ */ jsx4(
           Text20,
           {
-            customColor: `var(${DesignToken42.ContentBasicSecondary})`,
+            customColor: `var(${DesignToken43.ContentBasicSecondary})`,
             size: "md",
             children: "No templates found"
           }
@@ -24660,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;
@@ -24695,10 +24796,10 @@ 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 DesignToken45,
+  DesignToken as DesignToken46,
   SpacingToken as SpacingToken45
 } from "@livechat/design-system-react-components";
 import { mergeDeep as mergeDeep2 } from "@livechat/developer-studio-api";
@@ -24711,12 +24812,12 @@ 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,
-  DesignToken as DesignToken43,
+  DesignToken as DesignToken44,
   Heading as Heading8,
   Icon as Icon37,
   SpacingToken as SpacingToken43
@@ -24729,19 +24830,19 @@ var wrapperCss = (hasData) => css`
   padding: 0 var(${SpacingToken43.Spacing6}) 0 var(${SpacingToken43.Spacing4});
   align-items: center;
   gap: var(${SpacingToken43.Spacing2});
-  border-bottom: 1px solid var(${DesignToken43.BorderBasicSecondary});
+  border-bottom: 1px solid var(${DesignToken44.BorderBasicSecondary});
 
   ${hasData && `> button:last-of-type {
     margin-left: auto;
   }`}
 `;
 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: [
@@ -24843,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,
@@ -24854,11 +24955,11 @@ import {
   ActionMenu as ActionMenu6,
   ActionMenuItem as ActionMenuItem2,
   Button as Button34,
-  DesignToken as DesignToken44,
+  DesignToken as DesignToken45,
   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";
@@ -24873,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();
@@ -24910,7 +25011,7 @@ function WorkflowsTable({ workflowsQuery, state }) {
                     cursor: pointer;
 
                     &:hover {
-                      background: var(${DesignToken44.SurfacePrimaryHover});
+                      background: var(${DesignToken45.SurfacePrimaryHover});
                     }
                   `,
             onClick: () => {
@@ -24921,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;
@@ -25042,7 +25143,7 @@ function WorkflowsTable({ workflowsQuery, state }) {
       {
         css: css`
               background: transparent !important;
-              color: var(${DesignToken44.ContentBasicSecondary});
+              color: var(${DesignToken45.ContentBasicSecondary});
             `,
         children: /* @__PURE__ */ jsx4("td", { align: "left", colSpan: 6, children: /* @__PURE__ */ jsxs2(Text21, { as: "div", size: "md", children: [
           "There are no",
@@ -25113,11 +25214,11 @@ var Grid_default = WorkflowsGrid;
 
 // src/views/Workflows/List/View.tsx
 var markedStyles = css`
-  color: var(${DesignToken45.ActionPrimaryDefault});
+  color: var(${DesignToken46.ActionPrimaryDefault});
 `;
 function WorkflowListView() {
   var _a;
-  const navigate = useNavigate20();
+  const navigate = useNavigate21();
   const [state, setState] = useState33({
     filters: {
       status: "All",
@@ -25207,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;
     }
@@ -25285,6 +25386,7 @@ function WorkflowsModule({ waitlistImage }) {
 }
 export {
   LoginError_default as LoginError,
+  WORKFLOWS_TEST_SELECTORS,
   WorkflowsModule,
   config,
   getWorkflowsEnv,