npm - @livechat/platform-workflows - Versions diffs - 0.0.96 → 0.1.0 - Mend

@livechat/platform-workflows 0.0.96 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/index.mjs CHANGED Viewed

@@ -7,7 +7,7 @@ import {
   __spreadProps,
   __spreadValues,
   __toESM
-} from "./chunk-Q53XLSIX.mjs";
+} from "./chunk-I7LVNCZF.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({
@@ -412,7 +412,6 @@ import { Route as Route7, Routes as Routes7 } from "react-router-dom";
 // src/views/Waitlist/index.tsx
 import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
 // ../../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@18.3.18_react@18.3.1/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 import * as React2 from "react";
@@ -1762,15 +1761,6 @@ import {
   View
 } from "@livechat/developer-studio-ui-react";
-// src/hooks/workflows.ts
-import { useMutation, useQuery as useQuery2, useQueryClient } from "@tanstack/react-query";
-import { api as api2, IntegrationNames } from "@livechat/developer-studio-api";
-import {
-  useNotificationContext,
-  useUserContext
-} from "@livechat/developer-studio-ui-react";
-import { integrationCredentialsQueryKeys } from "@livechat/platform-integrations";
 // src/hooks/apps.ts
 import { useQuery } from "@tanstack/react-query";
 import { api } from "@livechat/developer-studio-api";
@@ -1793,7 +1783,65 @@ var useFetchInstalledApp = (appId, license) => {
   );
 };
+// src/hooks/navigate.ts
+import { useModuleRelativeNavigate } from "@livechat/developer-studio-ui-react";
+function useWorkflowsRelativeNavigate() {
+  const relativeNavigate = useModuleRelativeNavigate(
+    getWorkflowsEnv("subPath")
+  );
+  return relativeNavigate;
+}
+// src/hooks/user.ts
+import { useMutation, useQuery as useQuery2, useQueryClient } from "@tanstack/react-query";
+import { api as api2 } 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 = useQuery2(
+    userQueryKeys.accounts.products.getOrganizationProducts,
+    () => api2.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 = useQueryClient();
+  const { mutateAsync: updateOrganizationProducts, isLoading } = useMutation(
+    ({ productName }) => api2.platform.accounts.products.updateOrganizationProducts({
+      product: productName
+    }),
+    {
+      onSuccess: (_2) => {
+        void queryClient.refetchQueries({
+          queryKey: userQueryKeys.accounts.products.getOrganizationProducts
+        });
+      }
+    }
+  );
+  return { updateOrganizationProducts, isLoading };
+};
 // src/hooks/workflows.ts
+import { useMutation as useMutation2, useQuery as useQuery3, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import { api as api3, IntegrationNames } from "@livechat/developer-studio-api";
+import {
+  useNotificationContext,
+  useUserContext
+} from "@livechat/developer-studio-ui-react";
+import { integrationCredentialsQueryKeys } from "@livechat/platform-integrations";
 var queryKeys = {
   workflow: {
     base: "workflow",
@@ -1801,10 +1849,7 @@ var queryKeys = {
   },
   workflows: {
     base: "workflows",
-    get: (params) => [
-      queryKeys.workflows.base,
-      params
-    ]
+    get: () => [queryKeys.workflows.base]
   },
   workflowExecutions: {
     base: ["executions"],
@@ -1828,21 +1873,13 @@ var useFetchUserInstalledWorkflows = () => {
     isWorkflowAppLoading: !isSuccess || isUserFetching
   };
 };
-var useFetchWorkflows = (params) => {
+var useFetchWorkflows = () => {
   const notifications = useNotificationContext();
-  return useQuery2(
-    queryKeys.workflows.get(params),
+  return useQuery3(
+    queryKeys.workflows.get(),
     () => __async(void 0, null, function* () {
-      const workflows = yield api2.integrations.text.platform.workflow.workflows.getWorkflows();
-      return workflows.filter((workflow) => {
-        if (params.name) {
-          if (params.name.exact) {
-            return workflow.name === params.name.value;
-          }
-          return workflow.name.toLowerCase().includes(params.name.value.toLowerCase());
-        }
-        return true;
-      });
+      const workflows = yield api3.integrations.text.platform.workflow.workflows.getWorkflows();
+      return workflows;
     }),
     {
       onError: (e) => {
@@ -1853,10 +1890,10 @@ var useFetchWorkflows = (params) => {
 };
 var useFetchWorkflow = (workflowId) => {
   const notifications = useNotificationContext();
-  return useQuery2(
+  return useQuery3(
     queryKeys.workflow.get(workflowId),
     () => __async(void 0, null, function* () {
-      const workflow = yield api2.integrations.text.platform.workflow.workflows.getWorkflow(
+      const workflow = yield api3.integrations.text.platform.workflow.workflows.getWorkflow(
         workflowId
       );
       return workflow;
@@ -1871,10 +1908,10 @@ var useFetchWorkflow = (workflowId) => {
 };
 var useFetchWorkflowExecutionList = (workflowId) => {
   const notifications = useNotificationContext();
-  return useQuery2(
+  return useQuery3(
     queryKeys.workflowExecutions.get(workflowId),
     () => __async(void 0, null, function* () {
-      const executions = yield api2.integrations.text.platform.workflow.workflows.getWorkflowExecutionsList(
+      const executions = yield api3.integrations.text.platform.workflow.workflows.getWorkflowExecutionsList(
         workflowId
       );
       return executions;
@@ -1888,17 +1925,17 @@ var useFetchWorkflowExecutionList = (workflowId) => {
   );
 };
 var useCreateWorkflow = () => {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient2();
   const notifications = useNotificationContext();
   const { user } = useUserContext();
-  return useMutation(
+  return useMutation2(
     (payload) => __async(void 0, null, function* () {
       const workflow = __spreadProps(__spreadValues({}, payload), {
         definition: __spreadProps(__spreadValues({}, payload.definition), {
           ownerEmail: user == null ? void 0 : user.meta.email
         })
       });
-      const { data } = yield api2.integrations.text.platform.workflow.workflows.createWorkflow(
+      const { data } = yield api3.integrations.text.platform.workflow.workflows.createWorkflow(
         workflow
       );
       return data.id;
@@ -1906,9 +1943,7 @@ var useCreateWorkflow = () => {
     {
       onSuccess: (id) => __async(void 0, null, function* () {
         var _a;
-        const textCredential = (_a = queryClient.getQueryData(
-          integrationCredentialsQueryKeys.getCredentials()
-        )) == null ? void 0 : _a.find(
+        const textCredential = (_a = queryClient.getQueryData(integrationCredentialsQueryKeys.getCredentials())) == null ? void 0 : _a.find(
           (x) => x.provider === IntegrationNames.Text && x.type === "text_auth"
         );
         if (!textCredential) {
@@ -1916,7 +1951,7 @@ var useCreateWorkflow = () => {
             integrationCredentialsQueryKeys.getCredentials()
           );
         }
-        const workflow = yield api2.integrations.text.platform.workflow.workflows.getWorkflow(
+        const workflow = yield api3.integrations.text.platform.workflow.workflows.getWorkflow(
           id
         );
         queryClient.setQueryData(
@@ -1932,10 +1967,10 @@ var useCreateWorkflow = () => {
   );
 };
 var useCreateWorkflowDraft = () => {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient2();
   const notifications = useNotificationContext();
   const { user } = useUserContext();
-  return useMutation(
+  return useMutation2(
     (payload) => __async(void 0, null, function* () {
       const workflow = __spreadProps(__spreadValues({}, payload), {
         definition: __spreadProps(__spreadValues({}, payload.definition), {
@@ -1944,7 +1979,7 @@ var useCreateWorkflowDraft = () => {
       });
       const {
         data: { id }
-      } = yield api2.integrations.text.platform.workflow.workflows.createWorkflowDraft(
+      } = yield api3.integrations.text.platform.workflow.workflows.createWorkflowDraft(
         workflow.id,
         workflow
       );
@@ -1952,7 +1987,7 @@ var useCreateWorkflowDraft = () => {
     }),
     {
       onSuccess: (id) => __async(void 0, null, function* () {
-        const workflow = yield api2.integrations.text.platform.workflow.workflows.getWorkflow(
+        const workflow = yield api3.integrations.text.platform.workflow.workflows.getWorkflow(
           id
         );
         queryClient.setQueryData(
@@ -1968,11 +2003,11 @@ var useCreateWorkflowDraft = () => {
   );
 };
 var useUpdateWorkflow = () => {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient2();
   const notifications = useNotificationContext();
-  return useMutation(
+  return useMutation2(
     (workflow) => __async(void 0, null, function* () {
-      const { data } = yield api2.integrations.text.platform.workflow.workflows.updateWorkflow(
+      const { data } = yield api3.integrations.text.platform.workflow.workflows.updateWorkflow(
         workflow.id,
         workflow
       );
@@ -1989,11 +2024,11 @@ var useUpdateWorkflow = () => {
   );
 };
 var useDeleteWorkflow = () => {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient2();
   const notifications = useNotificationContext();
-  return useMutation(
+  return useMutation2(
     (workflow) => __async(void 0, null, function* () {
-      yield api2.integrations.text.platform.workflow.workflows.deleteWorkflow(
+      yield api3.integrations.text.platform.workflow.workflows.deleteWorkflow(
         workflow.id
       );
     }),
@@ -2017,11 +2052,11 @@ var useDeleteWorkflow = () => {
   );
 };
 var usePublishWorkflowDraft = () => {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient2();
   const notifications = useNotificationContext();
-  return useMutation(
+  return useMutation2(
     (workflow) => __async(void 0, null, function* () {
-      const { data } = yield api2.integrations.text.platform.workflow.workflows.publishWorkflowDraft(
+      const { data } = yield api3.integrations.text.platform.workflow.workflows.publishWorkflowDraft(
         workflow.id
       );
       return { id: data.id };
@@ -2029,7 +2064,7 @@ var usePublishWorkflowDraft = () => {
     {
       onSuccess: (_2, draft) => __async(void 0, null, function* () {
         if (draft.related_workflow_id) {
-          const workflow = yield api2.integrations.text.platform.workflow.workflows.getWorkflow(
+          const workflow = yield api3.integrations.text.platform.workflow.workflows.getWorkflow(
             draft.related_workflow_id
           );
           queryClient.setQueryData(
@@ -2037,7 +2072,7 @@ var usePublishWorkflowDraft = () => {
             () => workflow
           );
         } else {
-          const workflow = yield api2.integrations.text.platform.workflow.workflows.getWorkflow(
+          const workflow = yield api3.integrations.text.platform.workflow.workflows.getWorkflow(
             draft.id
           );
           queryClient.setQueryData(
@@ -2054,11 +2089,11 @@ var usePublishWorkflowDraft = () => {
   );
 };
 var useActivateWorkflow = () => {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient2();
   const notifications = useNotificationContext();
-  return useMutation(
+  return useMutation2(
     (_0) => __async(void 0, [_0], function* ({ id, active }) {
-      yield api2.integrations.text.platform.workflow.workflows.toggleWorkflowActivation(
+      yield api3.integrations.text.platform.workflow.workflows.toggleWorkflowActivation(
         id,
         active
       );
@@ -2080,12 +2115,12 @@ var useActivateWorkflow = () => {
 };
 var useExecuteWorkflow = () => {
   const notifications = useNotificationContext();
-  return useMutation(
+  return useMutation2(
     (_0) => __async(void 0, [_0], function* ({
       workflow,
       input
     }) {
-      yield api2.integrations.text.platform.workflow.workflows.executeWorkflow(
+      yield api3.integrations.text.platform.workflow.workflows.executeWorkflow(
         workflow.id,
         input
       );
@@ -2099,11 +2134,9 @@ var useExecuteWorkflow = () => {
 };
 var useGenerateAIResponse = () => {
   const notifications = useNotificationContext();
-  return useMutation(
+  return useMutation2(
     (payload) => __async(void 0, null, function* () {
-      const response = yield api2.integrations.text.ai.generateResponses(
-        payload
-      );
+      const response = yield api3.integrations.text.ai.generateResponses(payload);
       return response;
     }),
     {
@@ -2160,10 +2193,10 @@ var imgContainerCss = css`
 `;
 function Waitlist({ image }) {
   const { userHasInstalledWorkflows, isWorkflowAppLoading } = useFetchUserInstalledWorkflows();
-  const navigate = useNavigate();
+  const navigate = useWorkflowsRelativeNavigate();
   useEffect(() => {
     if (userHasInstalledWorkflows) {
-      navigate("/workflow/list");
+      navigate("/list");
     }
   }, [userHasInstalledWorkflows, navigate]);
   if (isWorkflowAppLoading) {
@@ -2235,18 +2268,12 @@ function Waitlist({ image }) {
 var Waitlist_default = Waitlist;
 // src/views/Workflows/index.tsx
-import { useEffect as useEffect21 } from "react";
-import { Navigate as Navigate2, Route as Route6, Routes as Routes6, useNavigate as useNavigate22 } from "react-router-dom";
+import { useEffect as useEffect22 } from "react";
+import { Navigate as Navigate2, Route as Route6, Routes as Routes6 } 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 useLocation6,
-  useNavigate as useNavigate14,
-  useParams as useParams5
-} from "react-router-dom";
+import { Route as Route3, Routes as Routes3, useLocation as useLocation6, useParams as useParams5 } from "react-router-dom";
 import {
   Loader as Loader3,
   useFetchOrganizationProducts as useFetchOrganizationProducts2
@@ -9192,12 +9219,275 @@ var shopifyTriggerTemplates = () => ({
   }
 });
+// src/constants/specification/Slack/index.ts
+import {
+  IntegrationDisplayNames as IntegrationDisplayNames8,
+  IntegrationNames as IntegrationNames9,
+  SlackEventNames
+} from "@livechat/developer-studio-api";
+import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType9 } from "@livechat/developer-studio-api/src";
+var SlackTriggerNames = {
+  ChannelNewMessagePosted: `${IntegrationNames9.Slack}-${SlackEventNames.ChannelNewMessagePosted}`,
+  MemberNewMention: `${IntegrationNames9.Slack}-${SlackEventNames.MemberNewMention}`
+};
+var slackTaskConfigs = () => ({
+  ["SEND_MESSAGE" /* SendMessage */]: {
+    key: "SEND_MESSAGE" /* SendMessage */,
+    type: WorkflowDefinitionTaskType9.http,
+    url: `${getWorkflowsEnv("workflowsApiUr")}/functions/slack-send-message`,
+    customization: {
+      provider: IntegrationNames9.Slack,
+      product: IntegrationDisplayNames8.Slack,
+      displayName: "Send Slack Message",
+      shortDescription: "Send a message via Slack bot to any public or private channel.",
+      description: "Send a message via Slack bot to any public or private channel."
+    },
+    specification: {
+      input: WORKFLOW_HTTP_TASK_INPUT_SCHEMA({
+        type: "object",
+        required: ["channelId", "text"],
+        properties: {
+          channelId: {
+            $ref: "#/$defs/slack_channel_id"
+          },
+          text: {
+            type: "string",
+            title: "Bot message content",
+            description: "This message will appear from your connected Slack bot. @mentions and formatting are supported."
+          }
+        }
+      }),
+      output: WORKFLOW_HTTP_TASK_OUTPUT_SCHEMA({
+        type: "object",
+        properties: {
+          timestamp: {
+            type: "string",
+            title: "Timestamp"
+          },
+          channelId: {
+            type: "string",
+            title: "Channel ID"
+          }
+        }
+      })
+    }
+  },
+  ["CREATE_CHANNEL" /* CreateChannel */]: {
+    key: "CREATE_CHANNEL" /* CreateChannel */,
+    type: WorkflowDefinitionTaskType9.http,
+    url: `${getWorkflowsEnv("workflowsApiUr")}/functions/slack-create_channel`,
+    customization: {
+      provider: IntegrationNames9.Slack,
+      product: IntegrationDisplayNames8.Slack,
+      displayName: "Create channel",
+      shortDescription: "Create a new public Slack channel",
+      description: "Create a new public Slack channel"
+    },
+    specification: {
+      input: WORKFLOW_HTTP_TASK_INPUT_SCHEMA({
+        type: "object",
+        required: ["channelName"],
+        properties: {
+          channelName: {
+            type: "string",
+            title: "Channel Name",
+            description: "Input must contain only lowercase letters, numbers, hyphens, and underscores (80 characters max)",
+            pattern: "^[a-z0-9-_]{1,80}$",
+            errorMessage: "Input must contain only lowercase letters, numbers, hyphens, and underscores (80 characters max)"
+          }
+        }
+      }),
+      output: WORKFLOW_HTTP_TASK_OUTPUT_SCHEMA({
+        type: "object",
+        properties: {
+          channelName: {
+            type: "string",
+            title: "Channel Name"
+          },
+          channelId: {
+            type: "string",
+            title: "Channel ID"
+          }
+        }
+      })
+    }
+  }
+});
+var slackTaskTemplates = () => ({
+  ["SEND_MESSAGE" /* SendMessage */]: __spreadProps(__spreadValues({}, workflowHttpTask), {
+    name: "SEND_MESSAGE" /* SendMessage */,
+    taskReferenceName: "slack_send_message",
+    inputParameters: __spreadProps(__spreadValues({}, workflowHttpTask.inputParameters), {
+      http_request: __spreadProps(__spreadValues({}, workflowHttpTask.inputParameters.http_request), {
+        uri: `${getWorkflowsEnv(
+          "workflowsApiUr"
+        )}/functions/slack-send-message`,
+        method: "POST",
+        body: {
+          channelId: "#{channelId}",
+          text: "#{text}"
+        },
+        headers: {
+          Accept: "application/json",
+          // eslint-disable-next-line no-template-curly-in-string
+          "x-cred-access-token": "${workflow.credentials.slack.access_token}"
+        }
+      })
+    })
+  }),
+  ["CREATE_CHANNEL" /* CreateChannel */]: __spreadProps(__spreadValues({}, workflowHttpTask), {
+    name: "CREATE_CHANNEL" /* CreateChannel */,
+    taskReferenceName: "slack_create_channel",
+    inputParameters: __spreadProps(__spreadValues({}, workflowHttpTask.inputParameters), {
+      http_request: __spreadProps(__spreadValues({}, workflowHttpTask.inputParameters.http_request), {
+        uri: `${getWorkflowsEnv(
+          "workflowsApiUr"
+        )}/functions/slack-create-channel`,
+        method: "POST",
+        body: {
+          channelName: "#{channelName}",
+          isPrivate: "#{isPrivate}"
+        },
+        headers: {
+          Accept: "application/json",
+          // eslint-disable-next-line no-template-curly-in-string
+          "x-cred-access-token": "${workflow.credentials.slack.access_token}"
+        }
+      })
+    })
+  })
+});
+var slackTriggerConfigs = () => {
+  return {
+    [SlackTriggerNames.ChannelNewMessagePosted]: {
+      key: SlackTriggerNames.ChannelNewMessagePosted,
+      name: SlackEventNames.ChannelNewMessagePosted,
+      type: "webhook",
+      customization: {
+        provider: IntegrationNames9.Slack,
+        product: IntegrationDisplayNames8.Slack,
+        displayName: "New message posted on channel",
+        shortDescription: "Triggers when any message is posted in a specified Slack channel.",
+        description: "Works with all messages, including from bots and integrations."
+      },
+      specification: {
+        input: {
+          type: "object",
+          required: ["channelId"],
+          properties: {
+            channelId: {
+              $ref: "#/$defs/slack_channel_id"
+            }
+          }
+        },
+        output: {
+          type: "object",
+          required: ["text", "sub_type", "channel_id"],
+          properties: {
+            text: {
+              type: "string",
+              title: "Text Message"
+            },
+            sub_type: {
+              type: "string",
+              title: "Sub type of the event"
+            },
+            channel_id: {
+              type: "string",
+              title: "Channel ID"
+            },
+            username: {
+              type: "string",
+              title: "Name of the user"
+            }
+          }
+        }
+      }
+    },
+    [SlackTriggerNames.MemberNewMention]: {
+      key: SlackTriggerNames.MemberNewMention,
+      name: SlackEventNames.MemberNewMention,
+      type: "webhook",
+      customization: {
+        provider: IntegrationNames9.Slack,
+        product: IntegrationDisplayNames8.Slack,
+        displayName: "New Slack mention",
+        shortDescription: "Triggers when a team member is @mentioned in a specified Slack channel.",
+        description: "Select which team member's @mentions should trigger this workflow."
+      },
+      specification: {
+        input: {
+          type: "object",
+          required: ["userId"],
+          properties: {
+            userId: {
+              $ref: "#/$defs/slack_user_id"
+            }
+          }
+        },
+        output: {
+          type: "object",
+          required: ["text", "sub_type", "channel_id"],
+          properties: {
+            text: {
+              type: "string",
+              title: "Text Message"
+            },
+            sub_type: {
+              type: "string",
+              title: "Sub type of the event"
+            },
+            channel_id: {
+              type: "string",
+              title: "Channel ID"
+            },
+            username: {
+              type: "string",
+              title: "Name of the user"
+            }
+          }
+        }
+      }
+    }
+  };
+};
+var slackTriggerTemplates = () => ({
+  [SlackTriggerNames.ChannelNewMessagePosted]: {
+    type: "webhook",
+    webhook: {
+      source: IntegrationNames9.Slack,
+      event: {
+        name: SlackEventNames.ChannelNewMessagePosted,
+        channelId: null
+      },
+      headers: {
+        // eslint-disable-next-line no-template-curly-in-string
+        "x-adapter-slack-token": ["${workflow.credentials.slack.access_token}"]
+      }
+    }
+  },
+  [SlackTriggerNames.MemberNewMention]: {
+    type: "webhook",
+    webhook: {
+      source: IntegrationNames9.Slack,
+      event: {
+        name: SlackEventNames.MemberNewMention,
+        userId: null
+      },
+      headers: {
+        // eslint-disable-next-line no-template-curly-in-string
+        "x-adapter-slack-token": ["${workflow.credentials.slack.access_token}"]
+      }
+    }
+  }
+});
 // src/constants/specification/utils.ts
-import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType9 } from "@livechat/developer-studio-api";
+import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType10 } from "@livechat/developer-studio-api";
 var getWorkflowItemConfigs = () => {
   return {
-    tasks: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, livechatTaskConfigs()), helpdeskTaskConfigs()), mailchimpTaskConfigs()), shopifyTaskConfigs()), hubspotTaskConfigs()), bigCommerceTaskConfigs()), openAiTaskConfigs()), systemTaskConfigs()),
-    triggers: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, livechatTriggerConfigs()), helpDeskTriggerConfigs()), mailchimpTriggerConfigs()), shopifyTriggerConfigs()), hubspotTriggerConfigs()), bigcommerceTriggerConfigs()), systemTriggerConfigs())
+    tasks: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, livechatTaskConfigs()), helpdeskTaskConfigs()), mailchimpTaskConfigs()), shopifyTaskConfigs()), hubspotTaskConfigs()), bigCommerceTaskConfigs()), openAiTaskConfigs()), systemTaskConfigs()), slackTaskConfigs()),
+    triggers: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, livechatTriggerConfigs()), helpDeskTriggerConfigs()), mailchimpTriggerConfigs()), shopifyTriggerConfigs()), hubspotTriggerConfigs()), slackTriggerConfigs()), bigcommerceTriggerConfigs()), systemTriggerConfigs())
   };
 };
 var getWorkflowItemTemplates = () => ({
@@ -9209,6 +9499,7 @@ var getWorkflowItemTemplates = () => ({
     bigcommerce: bigCommerceTaskTemplates(),
     shopify: shopifyTaskTemplates(),
     openai: openAiTaskTemplates(),
+    slack: slackTaskTemplates(),
     system: systemTaskTemplates()
   },
   triggers: {
@@ -9217,6 +9508,7 @@ var getWorkflowItemTemplates = () => ({
     mailchimp: mailchimpTriggerTemplates(),
     shopify: shopifyTriggerTemplates(),
     hubspot: hubSpotTriggerTemplates(),
+    slack: slackTriggerTemplates(),
     bigcommerce: bigcommerceTriggerTemplates(),
     system: systemTriggerTemplates()
   }
@@ -9365,7 +9657,7 @@ var WORKFLOW_SCHEMA_DEFS = {
               return {
                 if: {
                   properties: {
-                    type: { const: WorkflowDefinitionTaskType9.http },
+                    type: { const: WorkflowDefinitionTaskType10.http },
                     name: { const: config2.key }
                   }
                 },
@@ -9501,6 +9793,28 @@ var WORKFLOW_SCHEMA_DEFS = {
         displayField: "name",
         valueField: "id"
       }
+    },
+    slack_channel_id: {
+      type: "string",
+      title: "Slack Channel",
+      "x-ref": {
+        provider: "slack",
+        product: "slack",
+        name: "channels",
+        displayField: "name",
+        valueField: "id"
+      }
+    },
+    slack_user_id: {
+      type: "string",
+      title: "Username",
+      "x-ref": {
+        provider: "slack",
+        product: "slack",
+        name: "users",
+        displayField: "displayName",
+        valueField: "id"
+      }
     }
   }
 };
@@ -9731,8 +10045,8 @@ var WORKFLOW_SCHEMA = () => ({
 // src/constants/templates.ts
 import {
-  IntegrationDisplayNames as IntegrationDisplayNames8,
-  IntegrationNames as IntegrationNames9,
+  IntegrationDisplayNames as IntegrationDisplayNames9,
+  IntegrationNames as IntegrationNames10,
   TextLivechatEventNames as TextLivechatEventNames2,
   WorkflowTemplateCategory
 } from "@livechat/developer-studio-api";
@@ -9759,25 +10073,25 @@ var getWorkflowTemplates = () => [
     id: "1",
     name: "Create HelpDesk tickets with chat summaries when a chat ends",
     icons: [
-      IntegrationNames9.LiveChat,
-      IntegrationNames9.OpenAI,
-      IntegrationNames9.HelpDesk
+      IntegrationNames10.LiveChat,
+      IntegrationNames10.OpenAI,
+      IntegrationNames10.HelpDesk
     ],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a chat ends"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Pulls the full chat transcript"
       },
       {
-        product: IntegrationDisplayNames8.OpenAI,
+        product: IntegrationDisplayNames9.OpenAI,
         description: "Creates a summary of the chat"
       },
       {
-        product: IntegrationDisplayNames8.HelpDesk,
+        product: IntegrationDisplayNames9.HelpDesk,
         description: "Creates a new ticket with the chat summary. Use the pre-chat survey to pull the customer\u2019s email or provide a custom input"
       }
     ],
@@ -9788,7 +10102,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatEnded
           },
@@ -9881,9 +10195,9 @@ var getWorkflowTemplates = () => [
       }
     },
     products: [
-      IntegrationDisplayNames8.LiveChat,
-      IntegrationDisplayNames8.OpenAI,
-      IntegrationDisplayNames8.HelpDesk
+      IntegrationDisplayNames9.LiveChat,
+      IntegrationDisplayNames9.OpenAI,
+      IntegrationDisplayNames9.HelpDesk
     ],
     category: WorkflowTemplateCategory.ChatManagement
   },
@@ -9891,30 +10205,30 @@ var getWorkflowTemplates = () => [
     id: "2",
     name: "Create HelpDesk tickets when a competitor is mentioned during a chat",
     icons: [
-      IntegrationNames9.LiveChat,
-      IntegrationNames9.OpenAI,
-      IntegrationNames9.HelpDesk,
-      IntegrationNames9.Mailchimp
+      IntegrationNames10.LiveChat,
+      IntegrationNames10.OpenAI,
+      IntegrationNames10.HelpDesk,
+      IntegrationNames10.Mailchimp
     ],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a competitor is mentioned in the chat based on keywords"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Pulls the chat transcript data for analysis"
       },
       {
-        product: IntegrationDisplayNames8.OpenAI,
+        product: IntegrationDisplayNames9.OpenAI,
         description: "Analyzes the competitor mention in the context of sentiment"
       },
       {
-        product: IntegrationDisplayNames8.HelpDesk,
+        product: IntegrationDisplayNames9.HelpDesk,
         description: "Creates a notification ticket with the chat details. Use the LiveChat pre-chat survey to pull the customer\u2019s email or provide a custom input"
       },
       {
-        product: IntegrationDisplayNames8.Mailchimp,
+        product: IntegrationDisplayNames9.Mailchimp,
         description: "Adds a note to the customer in your Mailchimp"
       }
     ],
@@ -10028,7 +10342,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatMessage,
             filter: void 0
@@ -10042,10 +10356,10 @@ var getWorkflowTemplates = () => [
       }
     },
     products: [
-      IntegrationDisplayNames8.LiveChat,
-      IntegrationDisplayNames8.OpenAI,
-      IntegrationDisplayNames8.HelpDesk,
-      IntegrationDisplayNames8.Mailchimp
+      IntegrationDisplayNames9.LiveChat,
+      IntegrationDisplayNames9.OpenAI,
+      IntegrationDisplayNames9.HelpDesk,
+      IntegrationDisplayNames9.Mailchimp
     ],
     category: WorkflowTemplateCategory.NotificationAndAlerts
   },
@@ -10053,30 +10367,30 @@ var getWorkflowTemplates = () => [
     id: "3",
     name: "Send summarized chat insights to HelpDesk",
     icons: [
-      IntegrationNames9.LiveChat,
-      IntegrationNames9.OpenAI,
-      IntegrationNames9.HelpDesk,
-      IntegrationNames9.Mailchimp
+      IntegrationNames10.LiveChat,
+      IntegrationNames10.OpenAI,
+      IntegrationNames10.HelpDesk,
+      IntegrationNames10.Mailchimp
     ],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a chat ends"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Pulls the chat transcript data"
       },
       {
-        product: IntegrationDisplayNames8.OpenAI,
+        product: IntegrationDisplayNames9.OpenAI,
         description: "Summarizes the chat transcript"
       },
       {
-        product: IntegrationDisplayNames8.HelpDesk,
+        product: IntegrationDisplayNames9.HelpDesk,
         description: "Creates a ticket with the summarized chat and the customer as the ticket requester. Use the LiveChat pre-chat survey to pull the customer\u2019s email or provide a custom input"
       },
       {
-        product: IntegrationDisplayNames8.Mailchimp,
+        product: IntegrationDisplayNames9.Mailchimp,
         description: "Adds a custom note to the customer in Mailchimp"
       }
     ],
@@ -10189,7 +10503,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatEnded
           },
@@ -10202,10 +10516,10 @@ var getWorkflowTemplates = () => [
       }
     },
     products: [
-      IntegrationDisplayNames8.LiveChat,
-      IntegrationDisplayNames8.OpenAI,
-      IntegrationDisplayNames8.HelpDesk,
-      IntegrationDisplayNames8.Mailchimp
+      IntegrationDisplayNames9.LiveChat,
+      IntegrationDisplayNames9.OpenAI,
+      IntegrationDisplayNames9.HelpDesk,
+      IntegrationDisplayNames9.Mailchimp
     ],
     category: WorkflowTemplateCategory.ChatManagement
   },
@@ -10213,30 +10527,30 @@ var getWorkflowTemplates = () => [
     id: "4",
     name: "Send custom campaigns to customers on negative chat sentiment",
     icons: [
-      IntegrationNames9.LiveChat,
-      IntegrationNames9.Shopify,
-      IntegrationNames9.OpenAI,
-      IntegrationNames9.Mailchimp
+      IntegrationNames10.LiveChat,
+      IntegrationNames10.Shopify,
+      IntegrationNames10.OpenAI,
+      IntegrationNames10.Mailchimp
     ],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a chat ends"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Pulls the chat transcript"
       },
       {
-        product: IntegrationDisplayNames8.Shopify,
+        product: IntegrationDisplayNames9.Shopify,
         description: "Pulls customer data from Shopify"
       },
       {
-        product: IntegrationDisplayNames8.OpenAI,
+        product: IntegrationDisplayNames9.OpenAI,
         description: "Analyzes the chat sentiment"
       },
       {
-        product: IntegrationDisplayNames8.Mailchimp,
+        product: IntegrationDisplayNames9.Mailchimp,
         description: "Sends a custom campaign through Mailchimp"
       }
     ],
@@ -10352,7 +10666,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatEnded
           },
@@ -10365,10 +10679,10 @@ var getWorkflowTemplates = () => [
       }
     },
     products: [
-      IntegrationDisplayNames8.LiveChat,
-      IntegrationDisplayNames8.Shopify,
-      IntegrationDisplayNames8.OpenAI,
-      IntegrationDisplayNames8.Mailchimp
+      IntegrationDisplayNames9.LiveChat,
+      IntegrationDisplayNames9.Shopify,
+      IntegrationDisplayNames9.OpenAI,
+      IntegrationDisplayNames9.Mailchimp
     ],
     category: WorkflowTemplateCategory.SalesManagement
   },
@@ -10376,29 +10690,29 @@ var getWorkflowTemplates = () => [
     id: "5",
     name: "Add leads to Mailchimp",
     icons: [
-      IntegrationNames9.LiveChat,
-      IntegrationNames9.OpenAI,
-      IntegrationNames9.Mailchimp
+      IntegrationNames10.LiveChat,
+      IntegrationNames10.OpenAI,
+      IntegrationNames10.Mailchimp
     ],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a chat ends"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Pulls the chat transcript data"
       },
       {
-        product: IntegrationDisplayNames8.OpenAI,
+        product: IntegrationDisplayNames9.OpenAI,
         description: "Analyzes the chat sentiment"
       },
       {
-        product: IntegrationDisplayNames8.Mailchimp,
+        product: IntegrationDisplayNames9.Mailchimp,
         description: "Adds new subscriber to Mailchimp or updates existing one"
       },
       {
-        product: IntegrationDisplayNames8.Mailchimp,
+        product: IntegrationDisplayNames9.Mailchimp,
         description: "Adds a custom tag to a subscriber"
       }
     ],
@@ -10508,7 +10822,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatEnded
           },
@@ -10521,23 +10835,23 @@ var getWorkflowTemplates = () => [
       }
     },
     products: [
-      IntegrationDisplayNames8.LiveChat,
-      IntegrationDisplayNames8.OpenAI,
-      IntegrationDisplayNames8.Mailchimp
+      IntegrationDisplayNames9.LiveChat,
+      IntegrationDisplayNames9.OpenAI,
+      IntegrationDisplayNames9.Mailchimp
     ],
     category: WorkflowTemplateCategory.LeadCollection
   },
   {
     id: "6",
     name: "Send a welcome message in new chats",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a chat starts"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Sends a custom message in the chat"
       }
     ],
@@ -10583,7 +10897,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatStarted
           },
@@ -10595,32 +10909,32 @@ var getWorkflowTemplates = () => [
         }
       }
     },
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.CustomerExperience
   },
   {
     id: "7",
     name: "Create HelpDesk tickets on bad ratings",
     icons: [
-      IntegrationNames9.LiveChat,
-      IntegrationNames9.OpenAI,
-      IntegrationNames9.HelpDesk
+      IntegrationNames10.LiveChat,
+      IntegrationNames10.OpenAI,
+      IntegrationNames10.HelpDesk
     ],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a chat receives a bad rating"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Pulls the chat transcript"
       },
       {
-        product: IntegrationDisplayNames8.OpenAI,
+        product: IntegrationDisplayNames9.OpenAI,
         description: "Summarizes the chat"
       },
       {
-        product: IntegrationDisplayNames8.HelpDesk,
+        product: IntegrationDisplayNames9.HelpDesk,
         description: "Creates a ticket with the chat summary. Use the LiveChat pre-chat survey to pull the customer\u2019s email or provide a custom input"
       }
     ],
@@ -10712,7 +11026,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatRated,
             rating: "bad"
@@ -10724,31 +11038,31 @@ var getWorkflowTemplates = () => [
       }
     },
     products: [
-      IntegrationDisplayNames8.LiveChat,
-      IntegrationDisplayNames8.OpenAI,
-      IntegrationDisplayNames8.HelpDesk
+      IntegrationDisplayNames9.LiveChat,
+      IntegrationDisplayNames9.OpenAI,
+      IntegrationDisplayNames9.HelpDesk
     ],
     category: WorkflowTemplateCategory.NotificationAndAlerts
   },
   {
     id: "8",
     name: "Pull customer order history from Shopify",
-    icons: [IntegrationNames9.LiveChat, IntegrationNames9.Shopify],
+    icons: [IntegrationNames10.LiveChat, IntegrationNames10.Shopify],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a chat starts"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Pulls the chat transcript data"
       },
       {
-        product: IntegrationDisplayNames8.Shopify,
+        product: IntegrationDisplayNames9.Shopify,
         description: "Pulls the customer order history"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Sends a message with the customer\u2019s order history visible to the agent"
       }
     ],
@@ -10834,7 +11148,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatStarted
           },
@@ -10845,26 +11159,26 @@ var getWorkflowTemplates = () => [
       }
     },
     products: [
-      IntegrationDisplayNames8.LiveChat,
-      IntegrationDisplayNames8.Shopify
+      IntegrationDisplayNames9.LiveChat,
+      IntegrationDisplayNames9.Shopify
     ],
     category: WorkflowTemplateCategory.SalesManagement
   },
   {
     id: "9",
     name: "Add leads to HubSpot",
-    icons: [IntegrationNames9.LiveChat, IntegrationNames9.HubSpot],
+    icons: [IntegrationNames10.LiveChat, IntegrationNames10.HubSpot],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a chat ends"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Pulls the chat transcript data"
       },
       {
-        product: IntegrationDisplayNames8.HubSpot,
+        product: IntegrationDisplayNames9.HubSpot,
         description: "Creates a new contact in Hubspot"
       }
     ],
@@ -10932,7 +11246,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatEnded
           },
@@ -10943,26 +11257,26 @@ var getWorkflowTemplates = () => [
       }
     },
     products: [
-      IntegrationDisplayNames8.LiveChat,
-      IntegrationDisplayNames8.HubSpot
+      IntegrationDisplayNames9.LiveChat,
+      IntegrationDisplayNames9.HubSpot
     ],
     category: WorkflowTemplateCategory.LeadCollection
   },
   {
     id: "10",
     name: "Create HelpDesk tickets when a new chat is started",
-    icons: [IntegrationNames9.LiveChat, IntegrationNames9.HelpDesk],
+    icons: [IntegrationNames10.LiveChat, IntegrationNames10.HelpDesk],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a chat starts"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Pulls the chat transcript information"
       },
       {
-        product: IntegrationDisplayNames8.HelpDesk,
+        product: IntegrationDisplayNames9.HelpDesk,
         description: "Creates a ticket in HelpDesk. Use the LiveChat pre-chat survey to pull the customer\u2019s email or provide a custom input"
       }
     ],
@@ -11035,7 +11349,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatStarted
           },
@@ -11046,8 +11360,8 @@ var getWorkflowTemplates = () => [
       }
     },
     products: [
-      IntegrationDisplayNames8.LiveChat,
-      IntegrationDisplayNames8.HelpDesk
+      IntegrationDisplayNames9.LiveChat,
+      IntegrationDisplayNames9.HelpDesk
     ],
     category: WorkflowTemplateCategory.NotificationAndAlerts
   },
@@ -11055,25 +11369,25 @@ var getWorkflowTemplates = () => [
     id: "11",
     name: "Add leads to your marketing platforms",
     icons: [
-      IntegrationNames9.LiveChat,
-      IntegrationNames9.HubSpot,
-      IntegrationNames9.Mailchimp
+      IntegrationNames10.LiveChat,
+      IntegrationNames10.HubSpot,
+      IntegrationNames10.Mailchimp
     ],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a chat ends"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Pulls the chat transcript information"
       },
       {
-        product: IntegrationDisplayNames8.HubSpot,
+        product: IntegrationDisplayNames9.HubSpot,
         description: "Creates a new contact in Hubspot"
       },
       {
-        product: IntegrationDisplayNames8.Mailchimp,
+        product: IntegrationDisplayNames9.Mailchimp,
         description: "Adds new subscriber in Mailchimp"
       }
     ],
@@ -11164,7 +11478,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatEnded
           },
@@ -11175,27 +11489,27 @@ var getWorkflowTemplates = () => [
       }
     },
     products: [
-      IntegrationDisplayNames8.LiveChat,
-      IntegrationDisplayNames8.HubSpot,
-      IntegrationDisplayNames8.Mailchimp
+      IntegrationDisplayNames9.LiveChat,
+      IntegrationDisplayNames9.HubSpot,
+      IntegrationDisplayNames9.Mailchimp
     ],
     category: WorkflowTemplateCategory.LeadCollection
   },
   {
     id: "12",
     name: "Send review reminders for agents on custom tag added",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when agents add a specific tag to an active chat"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Supervises chat to allow for sending private messages"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Sends a reminder to ask for a review visible only to the agent"
       }
     ],
@@ -11264,7 +11578,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatTagged,
             tag: void 0,
@@ -11276,24 +11590,24 @@ var getWorkflowTemplates = () => [
         }
       }
     },
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.ChatManagement
   },
   {
     id: "13",
     name: "Send chat transcripts to customers",
-    icons: [IntegrationNames9.LiveChat, IntegrationNames9.HelpDesk],
+    icons: [IntegrationNames10.LiveChat, IntegrationNames10.HelpDesk],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a chat ends"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Pulls the chat transcript"
       },
       {
-        product: IntegrationDisplayNames8.HelpDesk,
+        product: IntegrationDisplayNames9.HelpDesk,
         description: "Sends the chat transcript to the customer via HelpDesk. Use the LiveChat pre-chat survey to pull the customer\u2019s email or provide a custom input"
       }
     ],
@@ -11365,7 +11679,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatEnded
           },
@@ -11376,34 +11690,34 @@ var getWorkflowTemplates = () => [
       }
     },
     products: [
-      IntegrationDisplayNames8.LiveChat,
-      IntegrationDisplayNames8.HelpDesk
+      IntegrationDisplayNames9.LiveChat,
+      IntegrationDisplayNames9.HelpDesk
     ],
     category: WorkflowTemplateCategory.CustomerExperience
   },
   {
     id: "14",
     name: "Automatically monitor new chat quality",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "When a new chat starts, the workflow is triggered"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "The system automatically adds a supervisor (by email) to monitor the chat"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "The chat gets tagged for quality review"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "The supervisor can silently observe the conversation"
       }
     ],
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.ChatManagement,
     workflow: {
       name: "Automatically monitor new chat quality",
@@ -11471,7 +11785,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatStarted
           },
@@ -11487,26 +11801,26 @@ var getWorkflowTemplates = () => [
   {
     id: "15",
     name: "Tag chats based on keywords",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "The system monitors every chat message"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "When a specified keyword appears in customer's or agent's message"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "The workflow automatically adds the corresponding tag to the chat"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "This happens in real-time as messages are sent"
       }
     ],
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.ChatManagement,
     workflow: {
       name: "Tag chats based on keywords",
@@ -11515,7 +11829,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatMessage,
             filter: void 0
@@ -11569,26 +11883,26 @@ var getWorkflowTemplates = () => [
   {
     id: "16",
     name: "Keep customers informed during transfers",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "When an agent transfers a chat"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "The system automatically sends a custom message to the customer"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Adds a tracking tag to the chat"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "The new agent sees the transfer history"
       }
     ],
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.ChatManagement,
     workflow: {
       name: "Keep customers informed during transfers",
@@ -11597,7 +11911,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatTransferred
           },
@@ -11673,22 +11987,22 @@ var getWorkflowTemplates = () => [
   {
     id: "17",
     name: "Auto-respond to chat ratings",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Detects when a chat is rated"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Identifies the rating type (good or bad)"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Sends a personalized follow-up message based on the rating"
       }
     ],
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.CustomerExperience,
     workflow: {
       name: "Auto-respond to chat ratings",
@@ -11697,7 +12011,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatRated,
             rating: "good"
@@ -11751,26 +12065,26 @@ var getWorkflowTemplates = () => [
   {
     id: "18",
     name: "Escalate urgent customer issues",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Monitors chat messages for sensitive keywords"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Tags the conversation for tracking and visibility"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Notifies a supervisor about the critical conversation"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Sends an alert message as a private notification to the supervisor"
       }
     ],
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.CustomerExperience,
     workflow: {
       name: "Escalate urgent customer issues",
@@ -11779,7 +12093,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatMessage,
             filter: void 0
@@ -11878,22 +12192,22 @@ var getWorkflowTemplates = () => [
   {
     id: "19",
     name: "Manage chats outside business hours",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "System checks if chat starts outside business hours"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Automatically transfers chat to the after-hours team"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Sends a custom message about after-hours support"
       }
     ],
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.CustomerExperience,
     workflow: {
       name: "Manage chats outside business hours",
@@ -11902,7 +12216,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatStarted
           },
@@ -11978,32 +12292,32 @@ var getWorkflowTemplates = () => [
   {
     id: "20",
     name: "Smart chat transfer assistant",
-    icons: [IntegrationNames9.LiveChat, IntegrationNames9.OpenAI],
+    icons: [IntegrationNames10.LiveChat, IntegrationNames10.OpenAI],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "When a chat is transferred"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "System automatically captures the chat transcript"
       },
       {
-        product: IntegrationDisplayNames8.OpenAI,
+        product: IntegrationDisplayNames9.OpenAI,
         description: "Creates a summary of the conversation"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Sends a private message to the receiving agent with context"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Tags the conversation for tracking"
       }
     ],
     products: [
-      IntegrationDisplayNames8.LiveChat,
-      IntegrationDisplayNames8.OpenAI
+      IntegrationDisplayNames9.LiveChat,
+      IntegrationDisplayNames9.OpenAI
     ],
     category: WorkflowTemplateCategory.ChatManagement,
     workflow: {
@@ -12013,7 +12327,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatTransferred
           },
@@ -12128,26 +12442,26 @@ var getWorkflowTemplates = () => [
   {
     id: "21",
     name: "Recover from negative ratings",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Customer provides a negative rating"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "System transfers chat to a senior agent/manager"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Sends an immediate recovery message to the customer"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Tags conversation for follow-up"
       }
     ],
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.CustomerExperience,
     workflow: {
       name: "Recover from negative ratings",
@@ -12156,7 +12470,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatRated,
             rating: "bad"
@@ -12256,22 +12570,22 @@ var getWorkflowTemplates = () => [
   {
     id: "22",
     name: "Automated Chat Transcript Delivery",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "When a chat conversation is finished by an agent"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "System automatically retrieves the full chat transcript"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "System automatically sends a message in the chat window with the transcript information"
       }
     ],
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.CustomerExperience,
     workflow: {
       name: "Automated Chat Transcript Delivery",
@@ -12280,7 +12594,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatEnded
           },
@@ -12351,18 +12665,18 @@ var getWorkflowTemplates = () => [
   {
     id: "23",
     name: "Proactive Engagement after Visitor Leaves",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Visitor leaves chat window"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "System sends a proactive message to the visitor in the chat window"
       }
     ],
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.CustomerExperience,
     workflow: {
       name: "Proactive Engagement after Visitor Leaves",
@@ -12371,7 +12685,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.UserRemovedFromChat
           },
@@ -12424,18 +12738,18 @@ var getWorkflowTemplates = () => [
   {
     id: "24",
     name: "Order Issue Auto-Tagger",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Customer sends a message containing specific keywords related to order issues"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "System automatically adds the user tag to the chat"
       }
     ],
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.CustomerExperience,
     workflow: {
       name: "Order Issue Auto-Tagger",
@@ -12444,7 +12758,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatMessage,
             filter: void 0
@@ -12498,18 +12812,18 @@ var getWorkflowTemplates = () => [
   {
     id: "25",
     name: "Intelligent Chat Routing by Product Interest",
-    icons: [IntegrationNames9.LiveChat],
+    icons: [IntegrationNames10.LiveChat],
     list: [
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "Customer message contains keywords related to specific product categories"
       },
       {
-        product: IntegrationDisplayNames8.LiveChat,
+        product: IntegrationDisplayNames9.LiveChat,
         description: "System transfers the chat to the designated agent group for that product category"
       }
     ],
-    products: [IntegrationDisplayNames8.LiveChat],
+    products: [IntegrationDisplayNames9.LiveChat],
     category: WorkflowTemplateCategory.ChatManagement,
     workflow: {
       name: "Intelligent Chat Routing by Product Interest",
@@ -12518,7 +12832,7 @@ var getWorkflowTemplates = () => [
       trigger: {
         type: "webhook",
         webhook: {
-          source: IntegrationNames9.LiveChat,
+          source: IntegrationNames10.LiveChat,
           event: {
             name: TextLivechatEventNames2.ChatMessage,
             filter: void 0
@@ -12573,7 +12887,7 @@ var getWorkflowTemplates = () => [
 // src/views/Workflows/Creator/Modals/AddTask/Modal.tsx
 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 { NavLink, useLocation as useLocation2, useParams as useParams2 } from "react-router-dom";
 import {
   Button as Button2,
   DesignToken as DesignToken4,
@@ -12584,42 +12898,203 @@ import {
   SpacingToken as SpacingToken3
 } from "@livechat/design-system-react-components";
 import {
-  IntegrationDisplayNames as IntegrationDisplayNames9,
-  IntegrationNames as IntegrationNames13
+  IntegrationDisplayNames as IntegrationDisplayNames10,
+  IntegrationNames as IntegrationNames14
 } from "@livechat/developer-studio-api";
 import {
   Column as Column3,
   Row as Row2,
-  Text as Text3,
-  useUserContext as useUserContext3
+  Text as Text3
 } from "@livechat/developer-studio-ui-react";
-// src/utils/json.ts
-import { JSONPath } from "jsonpath-plus";
-var jsonUtils = {
-  HASH_TAG: new RegExp(`(?<!["'])"\\$\\{([\\w.[\\]])*\\}"|\\$\\{([\\w.[\\]])*\\}(?=")|\\$\\{([\\w.[\\]])*\\}`, "g"),
-  HASH_TAG2: new RegExp(`(?<!["'])"#\\{([\\w.[\\]])*\\}"|#\\{([\\w.[\\]])*\\}(?=")|#\\{([\\w.[\\]])*\\}`, "g"),
-  PATH: /^([a-zA-Z_$][a-zA-Z0-9_$]*|\[\d+\])*(\.[a-zA-Z_$][a-zA-Z0-9_$]*|\[\d+\])*(\.)?$/g,
-  stringify(json, space = 4) {
-    return JSON.stringify(json, null, space);
-  },
-  escapeTag(value = "") {
-    const valueWithoutQuotes = value.replaceAll('"', "");
-    return valueWithoutQuotes.substring(2, valueWithoutQuotes.length - 1);
-  },
-  getRegex(prefix2 = "$") {
-    return prefix2 === "$" ? jsonUtils.HASH_TAG : jsonUtils.HASH_TAG2;
-  },
-  getMatchesInText(text2, options) {
-    var _a;
-    if (typeof text2 !== "string") {
-      return void 0;
-    }
-    const templates = jsonUtils.getRegex((_a = options == null ? void 0 : options.prefix) != null ? _a : "$").exec(text2);
-    const results = templates == null ? void 0 : templates.filter((match2) => jsonUtils.PATH.exec(jsonUtils.escapeTag(match2))).map(jsonUtils.escapeTag);
-    return results;
-  },
-  getMatchesInObject(input, prefix2 = "$") {
+// src/hooks/analytics.ts
+import { useUserContext as useUserContext2 } from "@livechat/developer-studio-ui-react";
+// src/utils/tracking.ts
+import * as amplitude from "@amplitude/analytics-browser";
+var logAmplitudeEvent = (name, payload, user) => {
+  amplitude.init(getWorkflowsEnv("amplitudeKey"), user);
+  amplitude.logEvent(name, payload);
+};
+var logSprigEvent = (name, email, payload) => {
+  const sprig = window.Sprig;
+  sprig("identifyAndTrack", {
+    eventName: name,
+    userId: email,
+    properties: payload
+  });
+};
+// src/utils/journeys/workflows/index.ts
+var workflowsJourneyFactory = (email) => ({
+  workflow: {
+    create: {
+      actions: {
+        createDraft: (workflowId) => {
+          logAmplitudeEvent(
+            "workflows.workflow.create.click",
+            {
+              original_workflow_id: workflowId
+            },
+            email
+          );
+        }
+      }
+    },
+    edit: {
+      actions: {
+        click: () => {
+          logAmplitudeEvent(
+            "workflows.workflow.edit.click",
+            {
+              source: "list"
+            },
+            email
+          );
+        }
+      }
+    },
+    delete: {
+      actions: {
+        click: (source, createdAt) => {
+          logAmplitudeEvent(
+            "workflows.workflow.delete.click",
+            __spreadValues({
+              source
+            }, source === "builder" && createdAt && {
+              lifetime_duration: Math.floor(
+                ((/* @__PURE__ */ new Date()).getTime() - new Date(createdAt).getTime()) / (1e3 * 60) % 60
+              )
+            }),
+            email
+          );
+        }
+      }
+    },
+    list: {
+      loaded: () => {
+        logSprigEvent("workflow-list-loaded", email);
+      }
+    },
+    builder: {
+      loaded: () => {
+        logSprigEvent("workflow-builder-loaded", email);
+      }
+    }
+  },
+  draft: {
+    create: {
+      actions: {
+        click: (source, templateName) => {
+          logAmplitudeEvent(
+            "workflows.draft.create.click",
+            __spreadValues({
+              source
+            }, source === "withTemplate" && { template_name: templateName }),
+            email
+          );
+          logSprigEvent("workflow-draft-create", email, __spreadValues({
+            mode: source
+          }, source === "withTemplate" && { template_name: templateName }));
+        }
+      }
+    },
+    edit: {
+      actions: {
+        click: (source) => {
+          logAmplitudeEvent(
+            "workflows.draft.edit.click",
+            {
+              source
+            },
+            email
+          );
+        },
+        addTrigger: (triggerType, triggerSource) => {
+          logAmplitudeEvent(
+            "workflows.draft.edit.addTrigger",
+            {
+              trigger_type: triggerType,
+              trigger_source: triggerSource
+            },
+            email
+          );
+        },
+        addAction: (actionType, actionProvider) => {
+          logAmplitudeEvent(
+            "workflows.draft.edit.addAction",
+            {
+              action_type: actionType,
+              action_provider: actionProvider
+            },
+            email
+          );
+        }
+      }
+    },
+    publish: {
+      actions: {
+        click: (workflowComplexity) => {
+          logAmplitudeEvent(
+            "workflows.draft.publish.click",
+            {
+              workflow_complexity: workflowComplexity
+            },
+            email
+          );
+          logSprigEvent("workflow-draft-publish", email);
+        }
+      }
+    },
+    delete: {
+      actions: {
+        click: () => {
+          logAmplitudeEvent("workflows.draft.delete.click", void 0, email);
+        }
+      }
+    }
+  },
+  template: {
+    list: {
+      loaded: () => {
+        logSprigEvent("template-list-loaded", email);
+      }
+    }
+  }
+});
+// src/hooks/analytics.ts
+function useWorkflowsJourney() {
+  const { user } = useUserContext2();
+  return workflowsJourneyFactory(user == null ? void 0 : user.meta.email);
+}
+// src/utils/json.ts
+import { JSONPath } from "jsonpath-plus";
+var jsonUtils = {
+  HASH_TAG: new RegExp(`(?<!["'])"\\$\\{([\\w.[\\]])*\\}"|\\$\\{([\\w.[\\]])*\\}(?=")|\\$\\{([\\w.[\\]])*\\}`, "g"),
+  HASH_TAG2: new RegExp(`(?<!["'])"#\\{([\\w.[\\]])*\\}"|#\\{([\\w.[\\]])*\\}(?=")|#\\{([\\w.[\\]])*\\}`, "g"),
+  PATH: /^([a-zA-Z_$][a-zA-Z0-9_$]*|\[\d+\])*(\.[a-zA-Z_$][a-zA-Z0-9_$]*|\[\d+\])*(\.)?$/g,
+  stringify(json, space = 4) {
+    return JSON.stringify(json, null, space);
+  },
+  escapeTag(value = "") {
+    const valueWithoutQuotes = value.replaceAll('"', "");
+    return valueWithoutQuotes.substring(2, valueWithoutQuotes.length - 1);
+  },
+  getRegex(prefix2 = "$") {
+    return prefix2 === "$" ? jsonUtils.HASH_TAG : jsonUtils.HASH_TAG2;
+  },
+  getMatchesInText(text2, options) {
+    var _a;
+    if (typeof text2 !== "string") {
+      return void 0;
+    }
+    const templates = jsonUtils.getRegex((_a = options == null ? void 0 : options.prefix) != null ? _a : "$").exec(text2);
+    const results = templates == null ? void 0 : templates.filter((match2) => jsonUtils.PATH.exec(jsonUtils.escapeTag(match2))).map(jsonUtils.escapeTag);
+    return results;
+  },
+  getMatchesInObject(input, prefix2 = "$") {
     const result = [];
     const regex = jsonUtils.getRegex(prefix2);
     const search = (item, path = "", instancePath = "") => {
@@ -12782,130 +13257,6 @@ var jsonUtils = {
   }
 };
-// src/utils/tracking.ts
-import * as amplitude from "@amplitude/analytics-browser";
-var logAmplitudeEvent = (name, payload, user) => {
-  amplitude.init(getWorkflowsEnv("amplitudeKey"), user);
-  amplitude.logEvent(name, payload);
-};
-// src/utils/amplitude/journeys/workflows/workflows.ts
-var workflowsBlockAmplitudeJourneyFactory = (email) => ({
-  workflow: {
-    create: {
-      actions: {
-        createDraft: (workflowId) => {
-          logAmplitudeEvent(
-            "workflows.workflow.create.click",
-            {
-              original_workflow_id: workflowId
-            },
-            email
-          );
-        }
-      }
-    },
-    edit: {
-      actions: {
-        click: () => {
-          logAmplitudeEvent(
-            "workflows.workflow.edit.click",
-            {
-              source: "list"
-            },
-            email
-          );
-        }
-      }
-    },
-    delete: {
-      actions: {
-        click: (source, createdAt) => {
-          logAmplitudeEvent(
-            "workflows.workflow.delete.click",
-            __spreadValues({
-              source
-            }, source === "builder" && createdAt && {
-              lifetime_duration: Math.floor(
-                ((/* @__PURE__ */ new Date()).getTime() - new Date(createdAt).getTime()) / (1e3 * 60) % 60
-              )
-            }),
-            email
-          );
-        }
-      }
-    }
-  },
-  draft: {
-    create: {
-      actions: {
-        click: (source, templateName) => {
-          logAmplitudeEvent(
-            "workflows.draft.create.click",
-            __spreadValues({
-              source
-            }, source === "withTemplate" && { template_name: templateName }),
-            email
-          );
-        }
-      }
-    },
-    edit: {
-      actions: {
-        click: (source) => {
-          logAmplitudeEvent(
-            "workflows.draft.edit.click",
-            {
-              source
-            },
-            email
-          );
-        },
-        addTrigger: (triggerType, triggerSource) => {
-          logAmplitudeEvent(
-            "workflows.draft.edit.addTrigger",
-            {
-              trigger_type: triggerType,
-              trigger_source: triggerSource
-            },
-            email
-          );
-        },
-        addAction: (actionType, actionProvider) => {
-          logAmplitudeEvent(
-            "workflows.draft.edit.addAction",
-            {
-              action_type: actionType,
-              action_provider: actionProvider
-            },
-            email
-          );
-        }
-      }
-    },
-    publish: {
-      actions: {
-        click: (workflowComplexity) => {
-          logAmplitudeEvent(
-            "workflows.draft.publish.click",
-            {
-              workflow_complexity: workflowComplexity
-            },
-            email
-          );
-        }
-      }
-    },
-    delete: {
-      actions: {
-        click: () => {
-          logAmplitudeEvent("workflows.draft.delete.click", void 0, email);
-        }
-      }
-    }
-  }
-});
 // src/views/Workflows/Common/Icons/ProductIcon.tsx
 import {
   Adjust,
@@ -12917,10 +13268,11 @@ import {
   Mailchimp as MailChimpIcon,
   Rocket,
   ShopifyColored as ShopifyIcon,
+  Slack as SlackIcon,
   Time
 } from "@livechat/design-system-icons";
 import { DesignToken as DesignToken2 } from "@livechat/design-system-react-components";
-import { IntegrationNames as IntegrationNames10 } from "@livechat/developer-studio-api";
+import { IntegrationNames as IntegrationNames11 } from "@livechat/developer-studio-api";
 var defaultIconStyle = ({
   disabled,
   height,
@@ -12928,23 +13280,23 @@ var defaultIconStyle = ({
   noFill,
   revertColors
 }) => css`
-    height: var(--spacing-${height});
-    width: var(--spacing-${width});
-    ${!noFill && "fill: white;"}
-    ${disabled && "opacity: 0.5;"}
+  height: var(--spacing-${height});
+  width: var(--spacing-${width});
+  ${!noFill && "fill: white;"}
+  ${disabled && "opacity: 0.5;"}
       path {
-      ${noFill && `stroke: var(${DesignToken2.ContentBasicPrimary})`}
-    }
+    ${noFill && `stroke: var(${DesignToken2.ContentBasicPrimary})`}
+  }
-    ${revertColors && `
+  ${revertColors && `
         fill: var(${DesignToken2.ContentBasicPrimary});
         path {
           fill: var(${DesignToken2.ContentBasicPrimary});
         }
         `}
-  `;
+`;
 var helpdeskconCss = ({
   disabled,
   height,
@@ -13009,11 +13361,11 @@ function ProductIcon({
           })
         }
       );
-    case IntegrationNames10.Mailchimp:
+    case IntegrationNames11.Mailchimp:
       return /* @__PURE__ */ jsx4(MailChimpIcon, { css: defaultIconStyle({ disabled, height, width }) });
-    case IntegrationNames10.Shopify:
+    case IntegrationNames11.Shopify:
       return /* @__PURE__ */ jsx4(ShopifyIcon, { css: defaultIconStyle({ disabled, height, width }) });
-    case IntegrationNames10.BigCommerce:
+    case IntegrationNames11.BigCommerce:
       return /* @__PURE__ */ jsx4(
         BigCommerceIcon,
         {
@@ -13025,9 +13377,11 @@ function ProductIcon({
           })
         }
       );
-    case IntegrationNames10.HubSpot:
+    case IntegrationNames11.HubSpot:
       return /* @__PURE__ */ jsx4(HubSpotIcon, { css: defaultIconStyle({ disabled, height, width }) });
-    case IntegrationNames10.OpenAI:
+    case IntegrationNames11.Slack:
+      return /* @__PURE__ */ jsx4(SlackIcon, { css: defaultIconStyle({ disabled, height, width }) });
+    case IntegrationNames11.OpenAI:
       return /* @__PURE__ */ jsx4(
         OpenAiIcon,
         {
@@ -13040,10 +13394,10 @@ function ProductIcon({
         }
       );
     case "helpdesk":
-    case IntegrationNames10.HelpDesk:
+    case IntegrationNames11.HelpDesk:
       return /* @__PURE__ */ jsx4(HelpdeskIcon, { css: helpdeskconCss({ disabled, height, width }) });
     case "livechat":
-    case IntegrationNames10.LiveChat:
+    case IntegrationNames11.LiveChat:
     default:
       return /* @__PURE__ */ jsx4(LivechatIcon, { css: livechatIconStyle({ disabled, height, width }) });
   }
@@ -13059,16 +13413,20 @@ import {
   useRef as useRef3,
   useState as useState4
 } from "react";
-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";
+import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType13 } from "@livechat/developer-studio-api";
 import { useNotificationContext as useNotificationContext2 } from "@livechat/developer-studio-ui-react";
+// src/utils/sendMessage.ts
+var sendMessage = (type) => {
+  window.parent.postMessage({ type }, "*");
+};
 // src/views/Workflows/Common/One/contexts/OneMessagesContext.tsx
 import { createContext as createContext2, useContext as useContext4, useMemo, useState } from "react";
 import { v4 as uuid } from "uuid";
-import { useUserContext as useUserContext2 } from "@livechat/developer-studio-ui-react";
+import { useUserContext as useUserContext3 } from "@livechat/developer-studio-ui-react";
 // src/views/Workflows/Common/One/helpers.ts
 import { v4 as uuidv4 } from "uuid";
@@ -13166,7 +13524,7 @@ function OneMessagesProvider({ children }) {
   const [isError, setIsError] = useState(null);
   const [events, setEvents] = useState([getInitialMessage()]);
   const generateAiResponseMutation = useGenerateAIResponse();
-  const { user } = useUserContext2();
+  const { user } = useUserContext3();
   const isLoading = generateAiResponseMutation.isLoading;
   const sendMessage2 = (message) => __async(this, null, function* () {
     setIsError(null);
@@ -13269,15 +13627,15 @@ var useOneWidgetContext = () => {
 };
 // src/views/Workflows/Creator/Builder/config.ts
-import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType10 } from "@livechat/developer-studio-api";
+import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType11 } from "@livechat/developer-studio-api";
 var NodeNames = {
   // workflow task nodes
   addTask: "ADD_TASK",
-  http: WorkflowDefinitionTaskType10.http,
-  forkJoin: WorkflowDefinitionTaskType10.forkJoin,
-  switch: WorkflowDefinitionTaskType10.switch,
-  terminate: WorkflowDefinitionTaskType10.terminate,
-  join: WorkflowDefinitionTaskType10.join,
+  http: WorkflowDefinitionTaskType11.http,
+  forkJoin: WorkflowDefinitionTaskType11.forkJoin,
+  switch: WorkflowDefinitionTaskType11.switch,
+  terminate: WorkflowDefinitionTaskType11.terminate,
+  join: WorkflowDefinitionTaskType11.join,
   // workflow trigger nodes
   addTrigger: "ADD_TRIGGER",
   trigger: "TRIGGER"
@@ -13301,9 +13659,10 @@ var DEFAULT_NODE_HEIGHT = {
 // 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";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 function useReplaceWorkflowIdInUrl() {
-  const navigate = useNavigate2();
+  const navigate = useNavigate();
+  const relativeNavigate = useWorkflowsRelativeNavigate();
   const location = useLocation();
   const { id } = useParams();
   const latestPathRef = useRef2(location.pathname);
@@ -13313,13 +13672,13 @@ function useReplaceWorkflowIdInUrl() {
   return useCallback(
     (newId) => {
       if (!id) {
-        navigate(`/workflow/${newId}`);
+        relativeNavigate(`/${newId}`);
         return;
       }
       const latestPath = latestPathRef.current.replace(`/${id}`, `/${newId}`);
       navigate(latestPath, { replace: true });
     },
-    [navigate, id]
+    [navigate, relativeNavigate, id]
   );
 }
@@ -13369,7 +13728,7 @@ function useWorkflowData(workflow) {
 }
 // src/views/Workflows/Creator/Provider/state/metadata/contexts/utils.ts
-import { IntegrationNames as IntegrationNames11 } from "@livechat/developer-studio-api";
+import { IntegrationNames as IntegrationNames12 } from "@livechat/developer-studio-api";
 var taskContextHandler = (schema) => {
   const generateExample = (schemaInner) => {
     if (!isJSONSchema7(schemaInner)) {
@@ -13559,12 +13918,13 @@ var getWorkflowContexts = (workflow, external) => {
     credentials: Object.fromEntries(
       external.credentials.filter(
         (credential) => [
-          IntegrationNames11.Text,
-          IntegrationNames11.BigCommerce,
-          IntegrationNames11.HubSpot,
-          IntegrationNames11.Mailchimp,
-          IntegrationNames11.Shopify,
-          IntegrationNames11.OpenAI
+          IntegrationNames12.Text,
+          IntegrationNames12.BigCommerce,
+          IntegrationNames12.HubSpot,
+          IntegrationNames12.Mailchimp,
+          IntegrationNames12.Shopify,
+          IntegrationNames12.OpenAI,
+          IntegrationNames12.Slack
         ].includes(credential.provider)
       ).map((credential) => {
         if (credential.type === "text_auth") {
@@ -13633,15 +13993,15 @@ import { useMemo as useMemo3 } from "react";
 import { useFetchIntegrationCredentialsQuery } from "@livechat/platform-integrations";
 // src/views/Workflows/Creator/Provider/state/metadata/utils.ts
-import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType11 } from "@livechat/developer-studio-api";
+import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType12 } from "@livechat/developer-studio-api";
 var flattenTasks = (tasks) => (Array.isArray(tasks) ? tasks : Object.values(tasks)).flatMap((task2) => {
-  if (task2.type === WorkflowDefinitionTaskType11.switch) {
+  if (task2.type === WorkflowDefinitionTaskType12.switch) {
     return [
       task2,
       ...Object.values(task2.decisionCases).flatMap((a) => flattenTasks(a)),
       ...task2.defaultCase ? flattenTasks(task2.defaultCase) : []
     ];
-  } else if (task2.type === WorkflowDefinitionTaskType11.forkJoin) {
+  } else if (task2.type === WorkflowDefinitionTaskType12.forkJoin) {
     return [task2, ...task2.forkTasks.flatMap((a) => flattenTasks(a))];
   }
   return [task2];
@@ -13650,52 +14010,10 @@ var flattenTasks = (tasks) => (Array.isArray(tasks) ? tasks : Object.values(task
 // 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/utils.ts
 import Ajv, { _ } from "ajv";
 import AjvWithErrors from "ajv-errors";
-import { IntegrationNames as IntegrationNames12 } from "@livechat/developer-studio-api";
+import { IntegrationNames as IntegrationNames13 } from "@livechat/developer-studio-api";
 var keywords = {
   urlWithQueryParams: {
     keyword: "queryParams",
@@ -13842,7 +14160,7 @@ var validateTasks = (workflow, frames, products) => {
         params: {}
       };
     });
-    const activationError = (config2 == null ? void 0 : config2.customization.provider.startsWith(IntegrationNames12.Text)) && !products.find(({ product }) => product === config2.customization.product) ? {
+    const activationError = (config2 == null ? void 0 : config2.customization.provider.startsWith(IntegrationNames13.Text)) && !products.find(({ product }) => product === config2.customization.product) ? {
       instancePath: baseInstancePath,
       keyword: "activation",
       message: `${config2.customization.product} not activated`,
@@ -13937,7 +14255,7 @@ var validateTrigger = (workflow, frames, products) => {
       params: {}
     };
   });
-  const activationError = config2 && config2.customization.provider.startsWith(IntegrationNames12.Text) && !products.find(({ product }) => product === config2.customization.product) ? {
+  const activationError = config2 && config2.customization.provider.startsWith(IntegrationNames13.Text) && !products.find(({ product }) => product === config2.customization.product) ? {
     instancePath: "/trigger",
     keyword: "activation",
     message: `${config2.customization.product} not activated`,
@@ -14303,7 +14621,7 @@ function WorkflowCreatorProviderBase({
 }) {
   var _a, _b;
   const { fitView } = useReactFlow();
-  const navigate = useNavigate3();
+  const navigate = useWorkflowsRelativeNavigate();
   const notifications = useNotificationContext2();
   const replaceWorkflowId = useReplaceWorkflowIdInUrl();
   const createWorkflowAction = useCreateWorkflow();
@@ -14357,8 +14675,8 @@ function WorkflowCreatorProviderBase({
       setTimeout(() => {
         setSelection(() => {
           const isNotEditable = (params == null ? void 0 : params.kind) === "task" && [
-            WorkflowDefinitionTaskType12.forkJoin,
-            WorkflowDefinitionTaskType12.join
+            WorkflowDefinitionTaskType13.forkJoin,
+            WorkflowDefinitionTaskType13.join
           ].includes(params.id) || (params == null ? void 0 : params.kind) === "add-trigger" || (params == null ? void 0 : params.kind) === "trigger" && params.id === "manual_only";
           return params ? __spreadProps(__spreadValues({}, params), {
             isEditable: !isNotEditable
@@ -14421,6 +14739,17 @@ function WorkflowCreatorProviderBase({
     },
     [autosaveWorkflowRef, setWorkflow]
   );
+  useEffect4(() => {
+    if (getWorkflowsEnv("isLiveChatMode")) {
+      sendMessage("closeSideNav" /* CloseSideNav */);
+      const timeoutId = setTimeout(() => {
+        focus();
+      }, 200);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [focus]);
   const goToAddTrigger = useCallback4(() => {
     navigate(
       `${basePath}/trigger/${OTHER_TYPES.SYSTEM}/${"manual" /* Manual */}`,
@@ -14456,13 +14785,14 @@ function WorkflowCreatorProviderBase({
   const removeTrigger = useCallback4(() => {
     var _a2;
     const state2 = autosaveStateRef.current;
-    replaceWorkflow(__spreadProps(__spreadValues({}, state2.workflow), {
-      trigger: {}
-    }));
     if (((_a2 = state2.selection) == null ? void 0 : _a2.kind) === "trigger") {
+      setSelection(void 0);
       toggle();
     }
-  }, [replaceWorkflow, toggle]);
+    replaceWorkflow(__spreadProps(__spreadValues({}, state2.workflow), {
+      trigger: {}
+    }));
+  }, [replaceWorkflow, setSelection, toggle]);
   const goToAddTask = useCallback4(
     (taskReference, parentTaskReference) => {
       navigate(`${basePath}/add`, {
@@ -14497,7 +14827,7 @@ function WorkflowCreatorProviderBase({
       if (newTasks[0].type === NodeNames.forkJoin) {
         const systemTasks = systemTaskTemplates();
         newTasks[0].forkTasks = [[], []];
-        newTasks.push(__spreadProps(__spreadValues({}, systemTasks[WorkflowDefinitionTaskType12.join]), {
+        newTasks.push(__spreadProps(__spreadValues({}, systemTasks[WorkflowDefinitionTaskType13.join]), {
           taskReferenceName: `join_${task2.taskReferenceName}_${existingTaskIndex ? Number(existingTaskIndex[1]) + 1 : 1}`
         }));
       }
@@ -14604,6 +14934,10 @@ function WorkflowCreatorProviderBase({
   const removeTask = useCallback4(
     (targetTaskReferenceName) => {
       var _a2;
+      if (targetTaskReferenceName === ((_a2 = state.selection) == null ? void 0 : _a2.id)) {
+        setSelection(void 0);
+        toggle();
+      }
       changeWorkflow((workflow2) => ({
         definition: {
           tasks: recursiveTaskReducer(
@@ -14616,11 +14950,8 @@ function WorkflowCreatorProviderBase({
           )
         }
       }));
-      if (targetTaskReferenceName === ((_a2 = state.selection) == null ? void 0 : _a2.id)) {
-        toggle();
-      }
     },
-    [(_b = state.selection) == null ? void 0 : _b.id, changeWorkflow, toggle]
+    [(_b = state.selection) == null ? void 0 : _b.id, changeWorkflow, setSelection, toggle]
   );
   const save = useCallback4(
     (silent) => __async(this, null, function* () {
@@ -14704,7 +15035,7 @@ function WorkflowCreatorProviderBase({
       } else {
         yield deleteWorkflowAction.mutateAsync(state2.workflow);
       }
-      navigate("/workflow/list");
+      navigate("/list");
       notifications.addSuccessToast("Workflow has been removed successfully");
     } finally {
       setAction("isRemoving", false);
@@ -14718,7 +15049,7 @@ function WorkflowCreatorProviderBase({
       }
       if (state2.workflow.related_workflow_id) {
         if (!(options2 == null ? void 0 : options2.overrideConfirmed)) {
-          navigate(`/workflow/${state2.workflow.id}/edit`);
+          navigate(`/${state2.workflow.id}/edit`);
           return;
         }
       }
@@ -14732,7 +15063,7 @@ function WorkflowCreatorProviderBase({
         const draftId = yield createWorkflowDraftAction.mutateAsync(
           state2.workflow
         );
-        navigate(`/workflow/${draftId}`);
+        navigate(`/${draftId}`);
         notifications.addSuccessToast(
           "Workflow draft has been created successfully"
         );
@@ -14760,7 +15091,7 @@ function WorkflowCreatorProviderBase({
       }
       if (!(options2 == null ? void 0 : options2.confirmed)) {
         navigate(
-          `/workflow/${(_a2 = state2.workflow.id) != null ? _a2 : "new"}/publish`
+          `/${(_a2 = state2.workflow.id) != null ? _a2 : "new"}/publish`
         );
         return;
       }
@@ -14770,12 +15101,12 @@ function WorkflowCreatorProviderBase({
           const { id } = yield publishWorkflowAction.mutateAsync(
             state2.workflow
           );
-          navigate(`/workflow/${id}`);
+          navigate(`/${id}`);
         } else {
           const id = yield createWorkflowAction.mutateAsync(__spreadProps(__spreadValues({}, state2.workflow), {
             draft: false
           }));
-          navigate(`/workflow/${id}`);
+          navigate(`/${id}`);
         }
         notifications.addSuccessToast(
           "Workflow draft has been published successfully"
@@ -14802,16 +15133,16 @@ function WorkflowCreatorProviderBase({
           yield deleteWorkflowAction.mutateAsync(state2.workflow);
         }
         if (state2.workflow.related_workflow_id) {
-          navigate(`/workflow/${state2.workflow.related_workflow_id}`);
+          navigate(`/${state2.workflow.related_workflow_id}`);
         } else {
-          navigate("/workflow/list");
+          navigate("/list");
         }
       } else if (state2.workflow.related_workflow_id) {
         yield deleteWorkflowAction.mutateAsync({
           id: state2.workflow.related_workflow_id,
           related_workflow_id: state2.workflow.id
         });
-        navigate(`/workflow/${state2.workflow.id}`);
+        navigate(`/${state2.workflow.id}`);
       }
       notifications.addSuccessToast(
         "Workflow draft has been discarded successfully"
@@ -14973,7 +15304,7 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
   var _a;
   const [search, setSearch] = useState5("");
   const location = useLocation2();
-  const navigate = useNavigate4();
+  const navigate = useWorkflowsRelativeNavigate();
   const params = useParams2();
   const [state, setState] = useState5();
   const config2 = useMemo4(
@@ -15007,12 +15338,12 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
       // },
       {
         name: "livechat",
-        displayName: IntegrationDisplayNames9.LiveChat,
+        displayName: IntegrationDisplayNames10.LiveChat,
         icon: /* @__PURE__ */ jsx4(
           ProductIcon_default,
           {
             height: 5,
-            product: IntegrationNames13.LiveChat,
+            product: IntegrationNames14.LiveChat,
             width: 5
           }
         ),
@@ -15025,13 +15356,13 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
       },
       {
         name: "helpdesk",
-        displayName: IntegrationDisplayNames9.HelpDesk,
+        displayName: IntegrationDisplayNames10.HelpDesk,
         icon: /* @__PURE__ */ jsx4(
           ProductIcon_default,
           {
             center: true,
             height: 5,
-            product: IntegrationNames13.HelpDesk,
+            product: IntegrationNames14.HelpDesk,
             width: 5
           }
         ),
@@ -15043,9 +15374,9 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
         }))
       },
       {
-        name: IntegrationNames13.OpenAI,
-        displayName: IntegrationDisplayNames9.OpenAI,
-        icon: /* @__PURE__ */ jsx4(ProductIcon_default, { height: 5, product: IntegrationNames13.OpenAI, width: 5 }),
+        name: IntegrationNames14.OpenAI,
+        displayName: IntegrationDisplayNames10.OpenAI,
+        icon: /* @__PURE__ */ jsx4(ProductIcon_default, { height: 5, product: IntegrationNames14.OpenAI, width: 5 }),
         values: Object.values(openAiTaskConfigs()).map((x) => ({
           key: x.key,
           name: x.customization.displayName,
@@ -15054,13 +15385,13 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
         }))
       },
       {
-        name: IntegrationNames13.Mailchimp,
-        displayName: IntegrationDisplayNames9.Mailchimp,
+        name: IntegrationNames14.Mailchimp,
+        displayName: IntegrationDisplayNames10.Mailchimp,
         icon: /* @__PURE__ */ jsx4(
           ProductIcon_default,
           {
             height: 5,
-            product: IntegrationNames13.Mailchimp,
+            product: IntegrationNames14.Mailchimp,
             width: 5
           }
         ),
@@ -15072,13 +15403,13 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
         }))
       },
       {
-        name: IntegrationNames13.HubSpot,
-        displayName: IntegrationDisplayNames9.HubSpot,
+        name: IntegrationNames14.HubSpot,
+        displayName: IntegrationDisplayNames10.HubSpot,
         icon: /* @__PURE__ */ jsx4(
           ProductIcon_default,
           {
             height: 5,
-            product: IntegrationNames13.HubSpot,
+            product: IntegrationNames14.HubSpot,
             width: 5
           }
         ),
@@ -15090,13 +15421,24 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
         }))
       },
       {
-        name: IntegrationNames13.BigCommerce,
-        displayName: IntegrationDisplayNames9.BigCommerce,
+        name: IntegrationNames14.Slack,
+        displayName: IntegrationDisplayNames10.Slack,
+        icon: /* @__PURE__ */ jsx4(ProductIcon_default, { height: 5, product: IntegrationNames14.Slack, width: 5 }),
+        values: Object.values(slackTaskConfigs()).map((x) => ({
+          key: x.key,
+          name: x.customization.displayName,
+          shortDescription: x.customization.shortDescription,
+          secondaryText: x.customization.description
+        }))
+      },
+      {
+        name: IntegrationNames14.BigCommerce,
+        displayName: IntegrationDisplayNames10.BigCommerce,
         icon: /* @__PURE__ */ jsx4(
           ProductIcon_default,
           {
             height: 5,
-            product: IntegrationNames13.BigCommerce,
+            product: IntegrationNames14.BigCommerce,
             width: 5
           }
         ),
@@ -15108,13 +15450,13 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
         }))
       },
       {
-        name: IntegrationNames13.Shopify,
-        displayName: IntegrationDisplayNames9.Shopify,
+        name: IntegrationNames14.Shopify,
+        displayName: IntegrationDisplayNames10.Shopify,
         icon: /* @__PURE__ */ jsx4(
           ProductIcon_default,
           {
             height: 5,
-            product: IntegrationNames13.Shopify,
+            product: IntegrationNames14.Shopify,
             width: 5
           }
         ),
@@ -15132,10 +15474,7 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
     addTask,
     state: { workflow }
   } = useWorkflowCreator();
-  const { user } = useUserContext3();
-  const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
-    user == null ? void 0 : user.meta.email
-  );
+  const journey = useWorkflowsJourney();
   useEffect5(() => {
     var _a2, _b, _c, _d, _e, _f, _g;
     if (!params.task) {
@@ -15186,10 +15525,7 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
   const handleAddTask = (task2) => {
     var _a2, _b;
     if (task2) {
-      amplitudeWorkflowsJourney.draft.edit.actions.addAction(
-        task2.type,
-        params.service
-      );
+      journey.draft.edit.actions.addAction(task2.type, params.service);
       addTask(
         task2,
         (_a2 = location.state) == null ? void 0 : _a2.taskReference,
@@ -15256,7 +15592,7 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
                 }
               ),
               config2.map(({ name, displayName, icon: icon2, values }) => {
-                const revertIconColor = getWorkflowsEnv("isHeadless") && (name === IntegrationNames13.OpenAI || name === IntegrationNames13.BigCommerce);
+                const revertIconColor = getWorkflowsEnv("isHeadless") && (name === IntegrationNames14.OpenAI || name === IntegrationNames14.BigCommerce);
                 if (search) {
                   if (values.some(
                     (el) => el.name.toLowerCase().includes(search.toLowerCase())
@@ -15273,11 +15609,13 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
                   border-radius: var(${RadiusToken2[3]});
                   width: 100%;
                   :has(.active) {
                     a {
                       color: var(${DesignToken4.ActionPrimaryDefault});
                     }
                   }
                   &:hover {
                     background-color: var(${DesignToken4.SurfacePrimaryHover});
                     cursor: pointer;
@@ -15286,6 +15624,7 @@ function AddWorkflowTaskModal({ basePath, onClose }) {
                       color: var(${DesignToken4.ActionPrimaryDefault});
                     }
                   }
                   ${revertIconColor ? `> svg {
                           fill: var(${DesignToken4.ContentBasicPrimary});
                           path {
@@ -15375,7 +15714,7 @@ var Modal_default = AddWorkflowTaskModal;
 // src/views/Workflows/Creator/Modals/AddTrigger/Modal.tsx
 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 { NavLink as NavLink2, useLocation as useLocation3, useParams as useParams3 } from "react-router-dom";
 import {
   Button as Button3,
   DesignToken as DesignToken6,
@@ -15386,14 +15725,13 @@ import {
   SpacingToken as SpacingToken5
 } from "@livechat/design-system-react-components";
 import {
-  IntegrationDisplayNames as IntegrationDisplayNames10,
-  IntegrationNames as IntegrationNames14
+  IntegrationDisplayNames as IntegrationDisplayNames11,
+  IntegrationNames as IntegrationNames15
 } from "@livechat/developer-studio-api";
 import {
   Column as Column5,
   Row as Row3,
-  Text as Text5,
-  useUserContext as useUserContext4
+  Text as Text5
 } from "@livechat/developer-studio-ui-react";
 // src/views/Workflows/Creator/Modals/AddTrigger/Options.tsx
@@ -15524,12 +15862,12 @@ function AddWorkflowTriggerModal({
       },
       {
         name: "livechat",
-        displayName: IntegrationDisplayNames10.LiveChat,
+        displayName: IntegrationDisplayNames11.LiveChat,
         icon: /* @__PURE__ */ jsx4(
           ProductIcon_default,
           {
             height: 5,
-            product: IntegrationNames14.LiveChat,
+            product: IntegrationNames15.LiveChat,
             width: 5
           }
         ),
@@ -15541,12 +15879,12 @@ function AddWorkflowTriggerModal({
       },
       {
         name: "helpdesk",
-        displayName: IntegrationDisplayNames10.HelpDesk,
+        displayName: IntegrationDisplayNames11.HelpDesk,
         icon: /* @__PURE__ */ jsx4(
           ProductIcon_default,
           {
             height: 5,
-            product: IntegrationNames14.HelpDesk,
+            product: IntegrationNames15.HelpDesk,
             width: 5
           }
         ),
@@ -15557,13 +15895,13 @@ function AddWorkflowTriggerModal({
         }))
       },
       {
-        name: IntegrationNames14.Mailchimp,
-        displayName: IntegrationDisplayNames10.Mailchimp,
+        name: IntegrationNames15.Mailchimp,
+        displayName: IntegrationDisplayNames11.Mailchimp,
         icon: /* @__PURE__ */ jsx4(
           ProductIcon_default,
           {
             height: 5,
-            product: IntegrationNames14.Mailchimp,
+            product: IntegrationNames15.Mailchimp,
             width: 5
           }
         ),
@@ -15574,13 +15912,13 @@ function AddWorkflowTriggerModal({
         }))
       },
       {
-        name: IntegrationNames14.Shopify,
-        displayName: IntegrationDisplayNames10.Shopify,
+        name: IntegrationNames15.Shopify,
+        displayName: IntegrationDisplayNames11.Shopify,
         icon: /* @__PURE__ */ jsx4(
           ProductIcon_default,
           {
             height: 5,
-            product: IntegrationNames14.Shopify,
+            product: IntegrationNames15.Shopify,
             width: 5
           }
         ),
@@ -15591,13 +15929,13 @@ function AddWorkflowTriggerModal({
         }))
       },
       {
-        name: IntegrationNames14.HubSpot,
-        displayName: IntegrationDisplayNames10.HubSpot,
+        name: IntegrationNames15.HubSpot,
+        displayName: IntegrationDisplayNames11.HubSpot,
         icon: /* @__PURE__ */ jsx4(
           ProductIcon_default,
           {
             height: 5,
-            product: IntegrationNames14.HubSpot,
+            product: IntegrationNames15.HubSpot,
             width: 5
           }
         ),
@@ -15608,13 +15946,23 @@ function AddWorkflowTriggerModal({
         }))
       },
       {
-        name: IntegrationNames14.BigCommerce,
-        displayName: IntegrationDisplayNames10.BigCommerce,
+        name: IntegrationNames15.Slack,
+        displayName: IntegrationDisplayNames11.Slack,
+        icon: /* @__PURE__ */ jsx4(ProductIcon_default, { height: 5, product: IntegrationNames15.Slack, width: 5 }),
+        values: Object.values(slackTriggerConfigs()).map((x) => ({
+          key: x.key,
+          name: x.customization.displayName,
+          secondaryText: x.customization.description
+        }))
+      },
+      {
+        name: IntegrationNames15.BigCommerce,
+        displayName: IntegrationDisplayNames11.BigCommerce,
         icon: /* @__PURE__ */ jsx4(
           ProductIcon_default,
           {
             height: 5,
-            product: IntegrationNames14.BigCommerce,
+            product: IntegrationNames15.BigCommerce,
             width: 5
           }
         ),
@@ -15628,14 +15976,11 @@ function AddWorkflowTriggerModal({
     []
   );
   const location = useLocation3();
-  const navigate = useNavigate5();
+  const navigate = useWorkflowsRelativeNavigate();
   const params = useParams3();
   const [state, setState] = useState6();
   const { addTrigger } = useWorkflowCreator();
-  const { user } = useUserContext4();
-  const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
-    user == null ? void 0 : user.meta.email
-  );
+  const journey = useWorkflowsJourney();
   useEffect6(() => {
     var _a, _b;
     if (!params.trigger) {
@@ -15649,7 +15994,7 @@ function AddWorkflowTriggerModal({
   }, [basePath, navigate, params.service, params.trigger]);
   const handleAddTrigger = (trigger) => {
     if (trigger) {
-      amplitudeWorkflowsJourney.draft.edit.actions.addTrigger(
+      journey.draft.edit.actions.addTrigger(
         trigger.type,
         trigger.type === "webhook" ? trigger.webhook.source : void 0
       );
@@ -15715,7 +16060,7 @@ function AddWorkflowTriggerModal({
                 }
               ),
               config2.map(({ name, displayName, icon: icon2, values }) => {
-                const revertIconColor = getWorkflowsEnv("isHeadless") && (name === IntegrationNames14.OpenAI || name === IntegrationNames14.BigCommerce);
+                const revertIconColor = getWorkflowsEnv("isHeadless") && (name === IntegrationNames15.OpenAI || name === IntegrationNames15.BigCommerce);
                 if (search) {
                   if (values.some(
                     (el) => el.name.toLowerCase().includes(search.toLowerCase())
@@ -15784,7 +16129,8 @@ function AddWorkflowTriggerModal({
                         }
                       )
                     ]
-                  }
+                  },
+                  name
                 );
               })
             ]
@@ -15821,7 +16167,7 @@ function AddWorkflowTriggerModal({
                     path: location.pathname,
                     routeState: location.state
                   }
-                ) });
+                ) }, name);
               }
               return null;
             }) : null
@@ -15842,8 +16188,7 @@ import {
   Modal as Modal3
 } from "@livechat/design-system-react-components";
 import {
-  ActionModalContent,
-  useUserContext as useUserContext5
+  ActionModalContent
 } from "@livechat/developer-studio-ui-react";
 function DeleteWorkflowModal({
   version,
@@ -15857,10 +16202,7 @@ function DeleteWorkflowModal({
     remove,
     discardDraft
   } = useWorkflowCreator();
-  const { user } = useUserContext5();
-  const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
-    user == null ? void 0 : user.meta.email
-  );
+  const journey = useWorkflowsJourney();
   return /* @__PURE__ */ jsx4(Modal3, { heading: true, onClose, children: /* @__PURE__ */ jsxs2(
     ActionModalContent,
     {
@@ -15873,10 +16215,10 @@ function DeleteWorkflowModal({
             loading: version === "draft" ? isDiscarding : isRemoving,
             onClick: () => {
               if (version === "draft") {
-                amplitudeWorkflowsJourney.draft.delete.actions.click();
+                journey.draft.delete.actions.click();
                 void discardDraft();
               } else {
-                amplitudeWorkflowsJourney.workflow.delete.actions.click(
+                journey.workflow.delete.actions.click(
                   "builder",
                   workflow.created_at
                 );
@@ -15907,7 +16249,6 @@ function DeleteWorkflowModal({
 }
 // src/views/Workflows/Creator/Modals/Edit/Modal.tsx
-import { useNavigate as useNavigate6 } from "react-router-dom";
 import { Error as Error3 } from "@livechat/design-system-icons";
 import {
   Button as Button5,
@@ -15916,12 +16257,11 @@ import {
   Modal as Modal4
 } from "@livechat/design-system-react-components";
 import {
-  ActionModalContent as ActionModalContent2,
-  useUserContext as useUserContext6
+  ActionModalContent as ActionModalContent2
 } 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 = useNavigate6();
+  const navigate = useWorkflowsRelativeNavigate();
   const {
     state: {
       workflow,
@@ -15929,10 +16269,7 @@ function EditWorkflowModal({ onClose }) {
     },
     createDraft
   } = useWorkflowCreator();
-  const { user } = useUserContext6();
-  const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
-    user == null ? void 0 : user.meta.email
-  );
+  const journey = useWorkflowsJourney();
   return /* @__PURE__ */ jsx8(Modal4, { heading: true, onClose, children: /* @__PURE__ */ jsx8(
     ActionModalContent2,
     {
@@ -15942,8 +16279,8 @@ function EditWorkflowModal({ onClose }) {
           {
             kind: "secondary",
             onClick: () => {
-              amplitudeWorkflowsJourney.draft.edit.actions.click("existing");
-              navigate(`/workflow/${workflow.related_workflow_id}`, {
+              journey.draft.edit.actions.click("existing");
+              navigate(`/${workflow.related_workflow_id}`, {
                 replace: true
               });
             },
@@ -15956,7 +16293,7 @@ function EditWorkflowModal({ onClose }) {
             kind: "destructive",
             loading: isCreating,
             onClick: () => {
-              amplitudeWorkflowsJourney.draft.edit.actions.click("override");
+              journey.draft.edit.actions.click("override");
               void createDraft({ overrideConfirmed: true });
             },
             children: "Overwrite draft"
@@ -16079,7 +16416,6 @@ var Modal_default3 = ExecuteWorkflowModal;
 // src/views/Workflows/Creator/Modals/Preview/Modal.tsx
 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";
@@ -18556,8 +18892,8 @@ function CustomCheckboxWidget(props) {
           props.onChange(Boolean(items == null ? void 0 : items[0].key));
         },
         options: [
-          { key: "true", name: "True" },
-          { key: "false", name: "False" }
+          { key: "true" /* True */, name: "True" },
+          { key: "" /* False */, name: "False" }
         ],
         selected: [
           {
@@ -18914,7 +19250,7 @@ import {
   ShadowToken as ShadowToken2,
   SpacingToken as SpacingToken16
 } from "@livechat/design-system-react-components";
-import { IntegrationNames as IntegrationNames15 } from "@livechat/developer-studio-api";
+import { IntegrationNames as IntegrationNames16 } from "@livechat/developer-studio-api";
 import { Column as Column7 } from "@livechat/developer-studio-ui-react";
 var Node2 = newStyled.div`
   color: var(${DesignToken16.ContentBasicPrimary});
@@ -18966,7 +19302,7 @@ function HttpNodeBase({
   } = useWorkflowCreator();
   const frame = frames.tasks[data.taskReferenceName];
   const customization = (_b = (_a = frame == null ? void 0 : frame.__meta) == null ? void 0 : _a.config) == null ? void 0 : _b.customization;
-  const revertIconColor = getWorkflowsEnv("isHeadless") && ((customization == null ? void 0 : customization.provider) === IntegrationNames15.OpenAI || (customization == null ? void 0 : customization.provider) === IntegrationNames15.BigCommerce);
+  const revertIconColor = getWorkflowsEnv("isHeadless") && ((customization == null ? void 0 : customization.provider) === IntegrationNames16.OpenAI || (customization == null ? void 0 : customization.provider) === IntegrationNames16.BigCommerce);
   return /* @__PURE__ */ jsxs2(
     Node2,
     {
@@ -19048,13 +19384,14 @@ import {
   TabsList,
   TabsWrapper
 } from "@livechat/design-system-react-components";
-import { IntegrationNames as IntegrationNames16 } from "@livechat/developer-studio-api";
+import { IntegrationNames as IntegrationNames17 } from "@livechat/developer-studio-api";
 import {
   BigCommerceStatus,
   HubSpotStatus,
   MailchimpStatus,
   OpenaiStatus,
-  ShopifyStatus
+  ShopifyStatus,
+  SlackStatus
 } from "@livechat/platform-integrations";
 // src/views/Workflows/Creator/Builder/Forms/Schema/integrations/Text/index.tsx
@@ -19066,7 +19403,7 @@ import {
   Column as Column8,
   Row as Row10,
   useNotificationContext as useNotificationContext3,
-  useUserContext as useUserContext7
+  useUserContext as useUserContext8
 } from "@livechat/developer-studio-ui-react";
 import {
   TextStatus,
@@ -19075,7 +19412,7 @@ import {
 function GlobalAccounts(props) {
   const { pathname } = useLocation4();
   const notifications = useNotificationContext3();
-  const { user } = useUserContext7();
+  const { user } = useUserContext8();
   const organizationProductsQuery = useFetchOrganizationProducts();
   const {
     updateOrganizationProducts,
@@ -19088,57 +19425,65 @@ function GlobalAccounts(props) {
     void organizationProductsQuery.refetch();
   }, [organizationProductsQuery]);
   return /* @__PURE__ */ jsxs2(Column8, { gap: `var(${SpacingToken17.Spacing3})`, notPadded: true, children: [
-    props.product && needToBeActivated ? /* @__PURE__ */ jsxs2(Card, { light: true, children: [
-      /* @__PURE__ */ jsxs2("p", { children: [
-        "To use ",
-        props.product,
-        " in your workflow, you need an active",
-        " ",
-        props.product,
-        " account."
-      ] }),
-      props.product === "HelpDesk" && /* @__PURE__ */ jsx4("p", { children: "We can activate your HelpDesk license on your behalf using your registered email. You`'ll automatically start a 14-day trial." }),
-      /* @__PURE__ */ jsx4("p", { children: "Do you want to proceed?" }),
-      /* @__PURE__ */ jsx4(Row10, { flexEnd: true, notPadded: true, children: /* @__PURE__ */ jsx4(
-        Button15,
-        {
-          kind: "primary",
-          loading: organizationProductsQuery.isRefetching || isOrganizationProductsUpdating,
-          onClick: () => __async(this, null, function* () {
-            if (!props.product) {
-              return;
-            }
-            try {
-              yield updateOrganizationProducts({
-                productName: props.product
-              });
-              user && void triggerAccountsAction(
-                {
-                  action: "activate",
-                  data: {
-                    redirectTo: {
-                      success: pathname || "/settings/integrations/shopify/settings"
+    props.product && needToBeActivated ? /* @__PURE__ */ jsxs2(
+      Card,
+      {
+        "data-testId": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.builder.forms.integrations.text.info,
+        light: true,
+        children: [
+          /* @__PURE__ */ jsxs2("p", { children: [
+            "To use ",
+            props.product,
+            " in your workflow, you need an active",
+            " ",
+            props.product,
+            " account."
+          ] }),
+          props.product === "HelpDesk" && /* @__PURE__ */ jsx4("p", { children: "We can activate your HelpDesk license on your behalf using your registered email. You`'ll automatically start a 14-day trial." }),
+          /* @__PURE__ */ jsx4("p", { children: "Do you want to proceed?" }),
+          /* @__PURE__ */ jsx4(Row10, { flexEnd: true, notPadded: true, children: /* @__PURE__ */ jsx4(
+            Button15,
+            {
+              "data-testId": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.builder.forms.integrations.text.button,
+              kind: "primary",
+              loading: organizationProductsQuery.isRefetching || isOrganizationProductsUpdating,
+              onClick: () => __async(this, null, function* () {
+                if (!props.product) {
+                  return;
+                }
+                try {
+                  yield updateOrganizationProducts({
+                    productName: props.product
+                  });
+                  user && void triggerAccountsAction(
+                    {
+                      action: "activate",
+                      data: {
+                        redirectTo: {
+                          success: pathname
+                        }
+                      },
+                      context: {},
+                      onSuccess: refetch
+                    },
+                    {
+                      notifications,
+                      user
                     }
-                  },
-                  context: {},
-                  onSuccess: refetch
-                },
-                {
-                  notifications,
-                  user
+                  );
+                } catch (e) {
+                  notifications.addErrorToast(
+                    `Couldn't activate ${props.product}`
+                  );
                 }
-              );
-            } catch (e) {
-              notifications.addErrorToast(
-                `Couldn't activate ${props.product}`
-              );
+              }),
+              type: "submit",
+              children: "Start free trial"
             }
-          }),
-          type: "submit",
-          children: "Start free trial"
-        }
-      ) })
-    ] }) : null,
+          ) })
+        ]
+      }
+    ) : null,
     /* @__PURE__ */ jsx4(TextStatus, {})
   ] });
 }
@@ -19146,13 +19491,14 @@ var Text_default = GlobalAccounts;
 // src/views/Workflows/Creator/Builder/Forms/Schema/Wrapper.tsx
 var componentsMap = {
-  [IntegrationNames16.HelpDesk]: ({ product }) => /* @__PURE__ */ jsx4(Text_default, { product }),
-  [IntegrationNames16.LiveChat]: ({ product }) => /* @__PURE__ */ jsx4(Text_default, { product }),
-  [IntegrationNames16.Shopify]: () => /* @__PURE__ */ jsx4(ShopifyStatus, {}),
-  [IntegrationNames16.Mailchimp]: () => /* @__PURE__ */ jsx4(MailchimpStatus, {}),
-  [IntegrationNames16.BigCommerce]: () => /* @__PURE__ */ jsx4(BigCommerceStatus, {}),
-  [IntegrationNames16.HubSpot]: () => /* @__PURE__ */ jsx4(HubSpotStatus, {}),
-  [IntegrationNames16.OpenAI]: () => /* @__PURE__ */ jsx4(OpenaiStatus, {})
+  [IntegrationNames17.HelpDesk]: ({ product }) => /* @__PURE__ */ jsx4(Text_default, { product }),
+  [IntegrationNames17.LiveChat]: ({ product }) => /* @__PURE__ */ jsx4(Text_default, { product }),
+  [IntegrationNames17.Shopify]: () => /* @__PURE__ */ jsx4(ShopifyStatus, {}),
+  [IntegrationNames17.Mailchimp]: () => /* @__PURE__ */ jsx4(MailchimpStatus, {}),
+  [IntegrationNames17.BigCommerce]: () => /* @__PURE__ */ jsx4(BigCommerceStatus, {}),
+  [IntegrationNames17.HubSpot]: () => /* @__PURE__ */ jsx4(HubSpotStatus, {}),
+  [IntegrationNames17.Slack]: () => /* @__PURE__ */ jsx4(SlackStatus, {}),
+  [IntegrationNames17.OpenAI]: () => /* @__PURE__ */ jsx4(OpenaiStatus, {})
 };
 function CustomSchemaFormWrapper({
   data,
@@ -19980,7 +20326,7 @@ import {
   ShadowToken as ShadowToken7,
   SpacingToken as SpacingToken22
 } from "@livechat/design-system-react-components";
-import { IntegrationNames as IntegrationNames17 } from "@livechat/developer-studio-api";
+import { IntegrationNames as IntegrationNames18 } from "@livechat/developer-studio-api";
 import { Column as Column11 } from "@livechat/developer-studio-ui-react";
 var Node6 = newStyled.div`
   color: var(${DesignToken21.ContentBasicPrimary});
@@ -20031,7 +20377,7 @@ function TriggerNodeBase({
   } = useWorkflowCreator();
   const frame = frames.trigger;
   const customization = (_a = frame == null ? void 0 : frame.__meta) == null ? void 0 : _a.config.customization;
-  const revertIconColor = getWorkflowsEnv("isHeadless") && ((customization == null ? void 0 : customization.provider) === IntegrationNames17.OpenAI || (customization == null ? void 0 : customization.provider) === IntegrationNames17.BigCommerce);
+  const revertIconColor = getWorkflowsEnv("isHeadless") && ((customization == null ? void 0 : customization.provider) === IntegrationNames18.OpenAI || (customization == null ? void 0 : customization.provider) === IntegrationNames18.BigCommerce);
   return /* @__PURE__ */ jsxs2(
     Node6,
     {
@@ -20262,7 +20608,7 @@ var Node_default6 = memo9(TriggerNode);
 // src/views/Workflows/Creator/Builder/Controls/CustomControls.tsx
 import { useEffect as useEffect17 } from "react";
-import { useLocation as useLocation5, useNavigate as useNavigate8 } from "react-router-dom";
+import { useLocation as useLocation5 } from "react-router-dom";
 import { ControlButton, Controls, useReactFlow as useReactFlow2 } from "reactflow";
 import {
   ArrowAutofitWidth,
@@ -21461,7 +21807,6 @@ var MarkdownEventRenderer = ({ children }) => /* @__PURE__ */ jsx4(
 );
 // src/views/Workflows/Common/One/components/NavigateButton.tsx
-import { useNavigate as useNavigate7 } from "react-router-dom";
 import { Add as Add7, ArrowForward, OpenInNew } from "@livechat/design-system-icons";
 import {
   Button as Button19,
@@ -21483,7 +21828,7 @@ function NavigateButton({
   kind,
   iconPosition
 }) {
-  const navigate = useNavigate7();
+  const navigate = useWorkflowsRelativeNavigate();
   const handleButtonClick = () => {
     if (isExternal) {
       window.open(url, "_blank");
@@ -22010,7 +22355,7 @@ function CustomControls({
   previewWorkflow
 }) {
   var _a;
-  const navigate = useNavigate8();
+  const navigate = useWorkflowsRelativeNavigate();
   const { fitView, zoomIn, zoomOut } = useReactFlow2();
   const { toggleOneWidget, isOpen } = useOneWidgetContext();
   const {
@@ -22124,7 +22469,6 @@ var CustomControls_default = CustomControls;
 // src/views/Workflows/Creator/Builder/Controls/SwitcherControls.tsx
 import { useState as useState26 } from "react";
-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";
@@ -22136,7 +22480,7 @@ function SwitcherControls({
   const [currentView, setCurrentView] = useState26(
     isDraft ? "draft" : "published"
   );
-  const navigate = useNavigate9();
+  const navigate = useWorkflowsRelativeNavigate();
   const {
     focus,
     state: { visibility }
@@ -22178,7 +22522,7 @@ function SwitcherControls({
       return;
     }
     setCurrentView(id);
-    navigate(`/workflow/${relatedWorkflowId}`, {
+    navigate(`/${relatedWorkflowId}`, {
       replace: true
     });
     setTimeout(() => {
@@ -22275,7 +22619,7 @@ var Edges_default = CustomEdge_default;
 import { MarkerType } from "reactflow";
 import ElkConstructor from "elkjs";
 import { DesignToken as DesignToken30 } from "@livechat/design-system-react-components";
-import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType13 } from "@livechat/developer-studio-api";
+import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType14 } from "@livechat/developer-studio-api";
 var elk = new ElkConstructor({
   defaultLayoutOptions: {
     "elk.algorithm": "layered",
@@ -22332,9 +22676,9 @@ var convertToNodes = (tasks) => {
     );
     const { parentSource, parentTargets } = sourceAndTargets != null ? sourceAndTargets : {};
     switch (task2.type) {
-      case WorkflowDefinitionTaskType13.terminate:
-      case WorkflowDefinitionTaskType13.http:
-      case WorkflowDefinitionTaskType13.join:
+      case WorkflowDefinitionTaskType14.terminate:
+      case WorkflowDefinitionTaskType14.http:
+      case WorkflowDefinitionTaskType14.join:
         nodes.push(
           buildNode(
             {
@@ -22353,7 +22697,7 @@ var convertToNodes = (tasks) => {
           )
         );
         return nodes;
-      case WorkflowDefinitionTaskType13.switch:
+      case WorkflowDefinitionTaskType14.switch:
         nodes.push(
           buildNode(
             {
@@ -22420,7 +22764,7 @@ var convertToNodes = (tasks) => {
           }
         );
         return nodes;
-      case WorkflowDefinitionTaskType13.forkJoin:
+      case WorkflowDefinitionTaskType14.forkJoin:
         nodes.push(
           buildNode(
             {
@@ -22661,6 +23005,7 @@ function WorkflowBuilder() {
     previewModalVisible,
     setPreviewModalVisible
   } = useWorkflowCreator();
+  const journey = useWorkflowsJourney();
   const [nodes, setNodes, onNodesChange] = useNodesState(
     []
   );
@@ -22673,13 +23018,14 @@ function WorkflowBuilder() {
   );
   useEffect18(() => {
     void (() => __async(this, null, function* () {
-      const { nodes: nodes2, edges: edges2 } = yield convertWorkflowDefinitionToReactflow(
-        workflow
-      );
+      const { nodes: nodes2, edges: edges2 } = yield convertWorkflowDefinitionToReactflow(workflow);
       setNodes(nodes2);
       setEdges(edges2);
     }))();
   }, [workflow, setNodes, setEdges, updateTask]);
+  useEffect18(() => {
+    journey.workflow.builder.loaded();
+  }, []);
   return /* @__PURE__ */ jsxs7(Fragment8, { children: [
     /* @__PURE__ */ jsxs7(
       ReactFlow,
@@ -22803,7 +23149,7 @@ function PreviewWorkflowModal({
   onApply,
   onClose
 }) {
-  const navigate = useNavigate10();
+  const navigate = useWorkflowsRelativeNavigate();
   const handleClose = useCallback16(
     (target) => {
       if (onClose) {
@@ -22909,6 +23255,11 @@ function PublishWorkflowModal({
     },
     publishDraft
   } = useWorkflowCreator();
+  const handlePublish = () => {
+    void publishDraft({
+      confirmed: true
+    });
+  };
   return /* @__PURE__ */ jsx15(
     Modal7,
     {
@@ -22934,9 +23285,7 @@ function PublishWorkflowModal({
                 "data-testid": WORKFLOWS_TEST_SELECTORS.views.workflows.creator.modals.publish.saveButton,
                 kind: "primary",
                 loading: isPublishing,
-                onClick: () => void publishDraft({
-                  confirmed: true
-                }),
+                onClick: handlePublish,
                 children: "Publish workflow"
               }
             )
@@ -22958,26 +23307,19 @@ function PublishWorkflowModal({
 }
 // src/views/Workflows/Creator/View.tsx
-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 DesignToken39,
   RadiusToken as RadiusToken18,
-  SpacingToken as SpacingToken35
+  SpacingToken as SpacingToken34
 } from "@livechat/design-system-react-components";
-// src/utils/sendMessage.ts
-var sendMessage = (type) => {
-  window.parent.postMessage({ type }, "*");
-};
 // src/views/Workflows/Creator/Panels/Details/index.tsx
 import { Navigate, Route, Routes } from "react-router-dom";
 // src/views/Workflows/Creator/Panels/Details/Panel.tsx
-import { useNavigate as useNavigate11, useParams as useParams4 } from "react-router-dom";
-import { Close as Close3 } from "@livechat/design-system-icons";
+import { useParams as useParams4 } from "react-router-dom";
+import { Close as Close2 } from "@livechat/design-system-icons";
 import {
   Button as Button25,
   DesignToken as DesignToken36,
@@ -23155,7 +23497,7 @@ function WorkflowDetailsPanel({
   onClose
 }) {
   var _a, _b, _c, _d, _e;
-  const navigate = useNavigate11();
+  const navigate = useWorkflowsRelativeNavigate();
   const { id, tab } = useParams4();
   const workflowQuery = useFetchWorkflow(id);
   const workflowExecutionsQuery = useFetchWorkflowExecutionList(id);
@@ -23189,7 +23531,7 @@ function WorkflowDetailsPanel({
       /* @__PURE__ */ jsx4(
         Button25,
         {
-          icon: /* @__PURE__ */ jsx4(Icon28, { source: Close3 }),
+          icon: /* @__PURE__ */ jsx4(Icon28, { source: Close2 }),
           kind: "text",
           onClick: () => {
             onClose == null ? void 0 : onClose();
@@ -23271,9 +23613,8 @@ function WorkflowDetails({
 // src/views/Workflows/Creator/Panels/Editor/Panel.tsx
 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 { Close as Close3 } from "@livechat/design-system-icons";
 import {
   Button as Button26,
   Heading as Heading4,
@@ -23302,7 +23643,7 @@ function configureMonaco(monaco) {
   });
 }
 function WorkflowEditorPanel({ onClose }) {
-  const navigate = useNavigate12();
+  const navigate = useWorkflowsRelativeNavigate();
   const {
     state: { workflow },
     replaceWorkflow,
@@ -23321,7 +23662,7 @@ function WorkflowEditorPanel({ onClose }) {
       /* @__PURE__ */ jsx4(
         Button26,
         {
-          icon: /* @__PURE__ */ jsx4(Icon29, { source: Close4 }),
+          icon: /* @__PURE__ */ jsx4(Icon29, { source: Close3 }),
           kind: "text",
           onClick: () => {
             if (onClose) {
@@ -23376,16 +23717,16 @@ function WorkflowEditorPanel({ onClose }) {
 var Panel_default2 = WorkflowEditorPanel;
 // src/views/Workflows/Creator/Panels/Element/Panel.tsx
-import { Automation as Automation2, Close as Close5 } from "@livechat/design-system-icons";
+import { Automation as Automation2, Close as Close4 } from "@livechat/design-system-icons";
 import {
   Button as Button27,
   DesignToken as DesignToken37,
   Icon as Icon30,
   RadiusToken as RadiusToken17,
   ShadowToken as ShadowToken10,
-  SpacingToken as SpacingToken33
+  SpacingToken as SpacingToken32
 } from "@livechat/design-system-react-components";
-import { IntegrationNames as IntegrationNames18 } from "@livechat/developer-studio-api";
+import { IntegrationNames as IntegrationNames19 } from "@livechat/developer-studio-api";
 import { Column as Column13, Row as Row16 } from "@livechat/developer-studio-ui-react";
 import "react-js-cron/dist/styles.css";
 var formCss = () => css`
@@ -23415,7 +23756,7 @@ var Title7 = newStyled.p`
   gap: 16px;
 `;
 function WorkflowElementPanel() {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d;
   const {
     updateTask,
     updateTrigger,
@@ -23434,8 +23775,8 @@ function WorkflowElementPanel() {
     data: workflow.trigger,
     frame: frames.trigger
   } : {
-    data: elements.tasks[(_a = selection.id) != null ? _a : ""],
-    frame: frames.tasks[(_b = selection.id) != null ? _b : ""]
+    data: elements.tasks[selection.id],
+    frame: frames.tasks[selection.id]
   } : {
     data: void 0,
     frame: void 0
@@ -23443,7 +23784,7 @@ function WorkflowElementPanel() {
   if (!data) {
     return;
   }
-  const config2 = (_c = frame == null ? void 0 : frame.__meta) == null ? void 0 : _c.config;
+  const config2 = (_a = frame == null ? void 0 : frame.__meta) == null ? void 0 : _a.config;
   const readonly = !workflow.draft;
   const contentHandler = () => {
     switch (data.type) {
@@ -23543,7 +23884,7 @@ function WorkflowElementPanel() {
       default:
     }
   };
-  const revertIconColor = getWorkflowsEnv("isHeadless") && ((config2 == null ? void 0 : config2.customization.provider) === IntegrationNames18.OpenAI || (config2 == null ? void 0 : config2.customization.provider) === IntegrationNames18.BigCommerce);
+  const revertIconColor = getWorkflowsEnv("isHeadless") && (config2.customization.provider === IntegrationNames19.OpenAI || config2.customization.provider === IntegrationNames19.BigCommerce);
   return /* @__PURE__ */ jsxs2(
     Wrapper4,
     {
@@ -23558,7 +23899,7 @@ function WorkflowElementPanel() {
             max-width: 85%;
           `,
               children: /* @__PURE__ */ jsxs2(Title7, { children: [
-                (config2 == null ? void 0 : config2.customization.product) ? /* @__PURE__ */ jsx4(
+                config2.customization.product ? /* @__PURE__ */ jsx4(
                   ProductIcon_default,
                   {
                     center: true,
@@ -23572,7 +23913,7 @@ function WorkflowElementPanel() {
                   Icon30,
                   {
                     css: css`
-                    width: var(${SpacingToken33.Spacing6});
+                    width: var(${SpacingToken32.Spacing6});
                   `,
                     size: "xlarge",
                     source: Automation2
@@ -23580,10 +23921,10 @@ function WorkflowElementPanel() {
                 ) }),
                 /* @__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" : ""
+                    ((_b = frame == null ? void 0 : frame.__meta) == null ? void 0 : _b.index) !== void 0 ? `${frame.__meta.index}. ` : "",
+                    (_c = config2.customization.displayName) != null ? _c : 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" : ""
+                  (_d = config2.customization.description) != null ? _d : data.type === NodeNames.switch ? "Conditional execution" : data.type === NodeNames.http ? "Make an HTTP request" : data.type === NodeNames.terminate ? "End the workflow" : ""
                 ] })
               ] })
             }
@@ -23595,7 +23936,7 @@ function WorkflowElementPanel() {
               onClick: () => {
                 toggle();
               },
-              children: /* @__PURE__ */ jsx4(Icon30, { source: Close5 })
+              children: /* @__PURE__ */ jsx4(Icon30, { source: Close4 })
             }
           )
         ] }),
@@ -23608,8 +23949,7 @@ var Panel_default3 = WorkflowElementPanel;
 // src/views/Workflows/Creator/Navbar.tsx
 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 { ChevronDown as ChevronDown3, Close as Close5 } from "@livechat/design-system-icons";
 import {
   ActionMenu as ActionMenu2,
   Button as Button28,
@@ -23617,19 +23957,18 @@ import {
   FormField as FormField3,
   Icon as Icon31,
   Input as Input5,
-  SpacingToken as SpacingToken34,
+  SpacingToken as SpacingToken33,
   Switch,
   Tooltip as Tooltip8
 } from "@livechat/design-system-react-components";
 import {
   Column as Column14,
   Row as Row17,
-  useOnClickOutside as useOnClickOutside2,
-  useUserContext as useUserContext8
+  useOnClickOutside as useOnClickOutside2
 } from "@livechat/developer-studio-ui-react";
 function WorkflowCreatorNavbar() {
   var _a, _b, _c, _d, _e;
-  const navigate = useNavigate13();
+  const navigate = useWorkflowsRelativeNavigate();
   const {
     state: {
       workflow,
@@ -23645,10 +23984,7 @@ function WorkflowCreatorNavbar() {
   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
-  );
+  const journey = useWorkflowsJourney();
   useEffect19(() => {
     setWorkflowName(workflow.name);
   }, [workflow.name]);
@@ -23704,8 +24040,8 @@ function WorkflowCreatorNavbar() {
       borderBottom: true,
       center: true,
       css: css`
-        min-height: var(${SpacingToken34.Spacing14});
-        padding-left: var(${SpacingToken34.Spacing4});
+        min-height: var(${SpacingToken33.Spacing14});
+        padding-left: var(${SpacingToken33.Spacing4});
       `,
       flexEnd: true,
       lowMargin: true,
@@ -23717,10 +24053,10 @@ function WorkflowCreatorNavbar() {
         getWorkflowsEnv("isLiveChatMode") && /* @__PURE__ */ jsx4(
           Button28,
           {
-            icon: /* @__PURE__ */ jsx4(Icon31, { source: Close6 }),
+            icon: /* @__PURE__ */ jsx4(Icon31, { source: Close5 }),
             kind: "plain",
             onClick: () => {
-              navigate("/workflow/list");
+              navigate("/list");
               sendMessage("openSideNav" /* OpenSideNav */);
             }
           }
@@ -23809,7 +24145,7 @@ function WorkflowCreatorNavbar() {
               }
             `,
               flexEnd: true,
-              gap: `var(${SpacingToken34.Spacing3})`,
+              gap: `var(${SpacingToken33.Spacing3})`,
               noWrap: true,
               notPadded: true,
               children: [
@@ -23866,7 +24202,7 @@ function WorkflowCreatorNavbar() {
                     kind: "primary",
                     loading: isPublishing,
                     onClick: () => {
-                      amplitudeWorkflowsJourney.draft.publish.actions.click(
+                      journey.draft.publish.actions.click(
                         workflow.definition.tasks.length
                       );
                       void publishDraft();
@@ -23881,9 +24217,7 @@ function WorkflowCreatorNavbar() {
                     loading: isCreating,
                     onClick: () => {
                       if (!workflow.related_workflow_id) {
-                        amplitudeWorkflowsJourney.workflow.create.actions.createDraft(
-                          workflow.id
-                        );
+                        journey.workflow.create.actions.createDraft(workflow.id);
                       }
                       void createDraft();
                     },
@@ -23910,31 +24244,15 @@ var WorkflowCreatorContent = newStyled.div`
   flex-flow: row nowrap;
   border-radius: var(${RadiusToken18.Radius4});
   ${({ 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);
+  margin: var(${SpacingToken34.Spacing4});
+  width: calc(100% - var(${SpacingToken34.Spacing8}));
+  height: calc(100% - var(${SpacingToken34.Spacing8}) - 70px);
 `;
 function WorkflowCreatorView() {
   const {
     state: { selection },
     focus
   } = useWorkflowCreator();
-  const { fitView } = useReactFlow3();
-  useEffect20(() => {
-    if (getWorkflowsEnv("isLiveChatMode")) {
-      sendMessage("closeSideNav" /* CloseSideNav */);
-      const timeoutId = setTimeout(() => {
-        fitView({
-          duration: 400,
-          maxZoom: 1.15,
-          minZoom: 1.15
-        });
-      }, 200);
-      return () => {
-        clearTimeout(timeoutId);
-      };
-    }
-  }, [fitView]);
   return /* @__PURE__ */ jsxs2(View2, { children: [
     /* @__PURE__ */ jsx4(Navbar_default, {}),
     /* @__PURE__ */ jsxs2(WorkflowCreatorContent, { grayBackground: getWorkflowsEnv("isHeadless"), children: [
@@ -23966,7 +24284,7 @@ function WorkflowCreator() {
   var _a, _b, _c;
   const location = useLocation6();
   const { id } = useParams5();
-  const navigate = useNavigate14();
+  const navigate = useWorkflowsRelativeNavigate();
   const workflowQuery = useFetchWorkflow(id === "new" ? void 0 : id);
   const credentialsQuery = useFetchIntegrationCredentialsQuery2();
   const organizationProducts = useFetchOrganizationProducts2();
@@ -23981,7 +24299,7 @@ function WorkflowCreator() {
   if (id !== "new" && !workflowQuery.isSuccess) {
     throw new Error("Couldn't load workflow");
   }
-  const basePath = `/workflow/${id}`;
+  const basePath = `/${id}`;
   const workflow = id === "new" ? (_c = (_b = location.state) == null ? void 0 : _b.workflow) != null ? _c : NEW_WORKFLOW : workflowQuery.data;
   if (!workflow) {
     throw new Error("Couldn't load workflow");
@@ -24110,7 +24428,6 @@ import { useParams as useParams6 } from "react-router-dom";
 // src/views/Workflows/List/Modals/PreviewTemplate/Modal.tsx
 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,
@@ -24120,15 +24437,11 @@ import {
   Modal as Modal8,
   ModalHeader as ModalHeader5,
   RadiusToken as RadiusToken19,
-  SpacingToken as SpacingToken37,
+  SpacingToken as SpacingToken36,
   Tag as Tag3,
-  Text as Text19
+  Text as Text18
 } from "@livechat/design-system-react-components";
-import {
-  Column as Column15,
-  Row as Row19,
-  useUserContext as useUserContext9
-} from "@livechat/developer-studio-ui-react";
+import { Column as Column15, Row as Row19 } from "@livechat/developer-studio-ui-react";
 // src/views/Workflows/Common/Icons/TemplateCategoryIcon.tsx
 import {
@@ -24141,8 +24454,8 @@ import {
 import {
   DesignToken as DesignToken40,
   Icon as Icon32,
-  SpacingToken as SpacingToken36,
-  Text as Text18
+  SpacingToken as SpacingToken35,
+  Text as Text17
 } from "@livechat/design-system-react-components";
 import { WorkflowTemplateCategory as WorkflowTemplateCategory2 } from "@livechat/developer-studio-api";
 import { Row as Row18 } from "@livechat/developer-studio-ui-react";
@@ -24154,7 +24467,7 @@ function WorkflowTemplateCategoryIcon(props) {
     [WorkflowTemplateCategory2.ChatManagement]: ChatDots,
     [WorkflowTemplateCategory2.CustomerExperience]: Smiles
   };
-  return /* @__PURE__ */ jsxs2(Row18, { gap: `var(${SpacingToken36.Spacing1})`, noWrap: true, notPadded: true, children: [
+  return /* @__PURE__ */ jsxs2(Row18, { gap: `var(${SpacingToken35.Spacing1})`, noWrap: true, notPadded: true, children: [
     /* @__PURE__ */ jsx4(
       Icon32,
       {
@@ -24164,7 +24477,7 @@ function WorkflowTemplateCategoryIcon(props) {
       }
     ),
     /* @__PURE__ */ jsx4(
-      Text18,
+      Text17,
       {
         customColor: `var(${DesignToken40.ContentBasicSecondary})`,
         noMargin: true,
@@ -24211,23 +24524,20 @@ var WorkflowBuilderWrapper2 = newStyled.div`
 `;
 var List = newStyled.ol`
   margin-block: 0;
-  padding-inline: var(${SpacingToken37.Spacing5});
+  padding-inline: var(${SpacingToken36.Spacing5});
 `;
 function WorkflowTemplatePreviewModal({
   template,
   onClose
 }) {
-  const navigate = useNavigate15();
+  const navigate = useWorkflowsRelativeNavigate();
   const {
     save,
     state: {
       actions: { isSaving }
     }
   } = useWorkflowCreator();
-  const { user } = useUserContext9();
-  const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
-    user == null ? void 0 : user.meta.email
-  );
+  const journey = useWorkflowsJourney();
   const handleClose = useCallback17(
     (target) => {
       if (onClose) {
@@ -24258,16 +24568,13 @@ function WorkflowTemplatePreviewModal({
     });
   };
   const handleUseTemplate = () => {
-    amplitudeWorkflowsJourney.draft.create.actions.click(
-      "withTemplate",
-      template.name
-    );
+    journey.draft.create.actions.click("withTemplate", template.name);
     void save();
   };
   return /* @__PURE__ */ jsx4(
     Modal8,
     {
-      footer: /* @__PURE__ */ jsxs2(Row19, { flexEnd: true, gap: `var(${SpacingToken37.Spacing3})`, notPadded: true, children: [
+      footer: /* @__PURE__ */ jsxs2(Row19, { flexEnd: true, gap: `var(${SpacingToken36.Spacing3})`, notPadded: true, children: [
         /* @__PURE__ */ jsx4(
           Button29,
           {
@@ -24295,7 +24602,7 @@ function WorkflowTemplatePreviewModal({
       heading: /* @__PURE__ */ jsx4(
         ModalHeader5,
         {
-          title: /* @__PURE__ */ jsxs2(Row19, { gap: `var(${SpacingToken37.Spacing3})`, notPadded: true, children: [
+          title: /* @__PURE__ */ jsxs2(Row19, { gap: `var(${SpacingToken36.Spacing3})`, notPadded: true, children: [
             /* @__PURE__ */ jsx4(
               Button29,
               {
@@ -24316,9 +24623,9 @@ function WorkflowTemplatePreviewModal({
           Column15,
           {
             css: css`
-            padding-inline: var(${SpacingToken37.Spacing5});
+            padding-inline: var(${SpacingToken36.Spacing5});
           `,
-            gap: `var(${SpacingToken37.Spacing5})`,
+            gap: `var(${SpacingToken36.Spacing5})`,
             noFlexBasis: true,
             notPadded: true,
             children: [
@@ -24330,26 +24637,26 @@ function WorkflowTemplatePreviewModal({
               max-width: 280px;
             `,
                   children: [
-                    /* @__PURE__ */ jsx4(Text19, { bold: true, size: "md", children: template.name }),
-                    /* @__PURE__ */ jsx4(Text19, { size: "md", children: template.workflow.description }),
-                    /* @__PURE__ */ jsx4(Text19, { noMargin: true, size: "md", children: "Here's how it works:" }),
+                    /* @__PURE__ */ jsx4(Text18, { bold: true, size: "md", children: template.name }),
+                    /* @__PURE__ */ jsx4(Text18, { size: "md", children: template.workflow.description }),
+                    /* @__PURE__ */ jsx4(Text18, { noMargin: true, size: "md", children: "Here's how it works:" }),
                     /* @__PURE__ */ jsx4(List, { children: template.list.map((item) => /* @__PURE__ */ jsxs2("li", { children: [
-                      /* @__PURE__ */ jsxs2(Text19, { as: "span", bold: true, noMargin: true, size: "md", children: [
+                      /* @__PURE__ */ jsxs2(Text18, { as: "span", bold: true, noMargin: true, size: "md", children: [
                         item.product,
                         ":",
                         " "
                       ] }),
-                      /* @__PURE__ */ jsx4(Text19, { as: "span", noMargin: true, size: "md", children: item.description })
+                      /* @__PURE__ */ jsx4(Text18, { as: "span", noMargin: true, size: "md", children: item.description })
                     ] }, item.product)) })
                   ]
                 }
               ),
               /* @__PURE__ */ jsxs2("div", { children: [
                 /* @__PURE__ */ jsx4(
-                  Text19,
+                  Text18,
                   {
                     css: css`
-                margin-block-end: var(${SpacingToken37.Spacing1});
+                margin-block-end: var(${SpacingToken36.Spacing1});
               `,
                     customColor: `var(${DesignToken41.ContentBasicSecondary})`,
                     noMargin: true,
@@ -24357,7 +24664,7 @@ function WorkflowTemplatePreviewModal({
                     children: "Products used:"
                   }
                 ),
-                /* @__PURE__ */ jsx4(Row19, { gap: `var(${SpacingToken37.Spacing1})`, notPadded: true, children: renderProductTags(template.products) })
+                /* @__PURE__ */ jsx4(Row19, { gap: `var(${SpacingToken36.Spacing1})`, notPadded: true, children: renderProductTags(template.products) })
               ] })
             ]
           }
@@ -24407,16 +24714,15 @@ var PreviewTemplate_default = WorkflowTemplatePreview;
 // src/views/Workflows/List/Modals/Create/Modal.tsx
 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 useMemo10, useState as useState31 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo10, useState as useState31 } from "react";
 import { FiletypeOther, OneColored } from "@livechat/design-system-icons";
 import {
   DesignToken as DesignToken43,
-  SpacingToken as SpacingToken42,
-  Text as Text20
+  SpacingToken as SpacingToken41,
+  Text as Text19
 } from "@livechat/design-system-react-components";
 import { Column as Column17, Intro as Intro3, Row as Row24 } from "@livechat/developer-studio-ui-react";
@@ -24434,41 +24740,37 @@ import {
   ActionMenu as ActionMenu3,
   Button as Button30,
   Icon as Icon34,
-  SpacingToken as SpacingToken38
+  SpacingToken as SpacingToken37
 } from "@livechat/design-system-react-components";
 import { WorkflowTemplateCategory as WorkflowTemplateCategory3 } from "@livechat/developer-studio-api";
 import { Row as Row20 } from "@livechat/developer-studio-ui-react";
 function WorkflowTemplatesCategoryFilter({
-  handleStatus,
-  status
+  handleCategory,
+  category
 }) {
-  var _a;
   const [isVisible, setIsVisible] = useState29(false);
   const getItem = useCallback18(
-    (key, category, icon2) => ({
-      key,
-      element: /* @__PURE__ */ jsxs2(Row20, { gap: `var(${SpacingToken38.Spacing1});`, notPadded: true, children: [
+    (category2, icon2) => ({
+      key: category2,
+      element: /* @__PURE__ */ jsxs2(Row20, { gap: `var(${SpacingToken37.Spacing1});`, notPadded: true, children: [
         icon2 ? /* @__PURE__ */ jsx4(Icon34, { source: icon2 }) : void 0,
-        category
+        category2
       ] }),
       onClick: () => {
-        handleStatus(category);
+        handleCategory(category2);
         setIsVisible(false);
       }
     }),
-    [handleStatus]
+    [handleCategory]
   );
   const options = [
-    getItem("0", "All"),
-    getItem("1", WorkflowTemplateCategory3.NotificationAndAlerts, Notifications2),
-    getItem("2", WorkflowTemplateCategory3.SalesManagement, CurrencyDollar2),
-    getItem("3", WorkflowTemplateCategory3.LeadCollection, TargetArrow2),
-    getItem("4", WorkflowTemplateCategory3.ChatManagement, ChatDots2),
-    getItem("5", WorkflowTemplateCategory3.CustomerExperience, Smiles2)
+    getItem("All"),
+    getItem(WorkflowTemplateCategory3.NotificationAndAlerts, Notifications2),
+    getItem(WorkflowTemplateCategory3.SalesManagement, CurrencyDollar2),
+    getItem(WorkflowTemplateCategory3.LeadCollection, TargetArrow2),
+    getItem(WorkflowTemplateCategory3.ChatManagement, ChatDots2),
+    getItem(WorkflowTemplateCategory3.CustomerExperience, Smiles2)
   ];
-  const selectedKey = (_a = options.find(
-    (option) => option.element.props.children[1] === status
-  )) == null ? void 0 : _a.key;
   return /* @__PURE__ */ jsx4(
     ActionMenu3,
     {
@@ -24477,7 +24779,7 @@ function WorkflowTemplatesCategoryFilter({
       },
       options,
       placement: "bottom",
-      selectedOptions: selectedKey ? [selectedKey] : [],
+      selectedOptions: category ? [category] : [],
       triggerRenderer: /* @__PURE__ */ jsxs2(
         Button30,
         {
@@ -24488,7 +24790,7 @@ function WorkflowTemplatesCategoryFilter({
           },
           children: [
             "Category: ",
-            status
+            category
           ]
         }
       ),
@@ -24512,43 +24814,39 @@ import {
   ActionMenu as ActionMenu4,
   Button as Button31,
   Icon as Icon35,
-  SpacingToken as SpacingToken39
+  SpacingToken as SpacingToken38
 } from "@livechat/design-system-react-components";
-import { IntegrationDisplayNames as IntegrationDisplayNames11 } from "@livechat/developer-studio-api";
+import { IntegrationDisplayNames as IntegrationDisplayNames12 } from "@livechat/developer-studio-api";
 import { Row as Row21 } from "@livechat/developer-studio-ui-react";
 function WorkflowTemplatesProductFilter({
-  handleStatus,
-  status
+  handleProduct,
+  product
 }) {
-  var _a;
   const [isVisible, setIsVisible] = useState30(false);
   const getItem = useCallback19(
-    (key, product, icon2) => ({
-      key,
-      element: /* @__PURE__ */ jsxs2(Row21, { gap: `var(${SpacingToken39.Spacing1});`, notPadded: true, children: [
+    (product2, icon2) => ({
+      key: product2,
+      element: /* @__PURE__ */ jsxs2(Row21, { gap: `var(${SpacingToken38.Spacing1});`, notPadded: true, children: [
         icon2 ? /* @__PURE__ */ jsx4(Icon35, { source: icon2 }) : void 0,
-        product
+        product2
       ] }),
       onClick: () => {
-        handleStatus(product);
+        handleProduct(product2);
         setIsVisible(false);
       }
     }),
-    [handleStatus]
+    [handleProduct]
   );
   const options = [
-    getItem("0", "All"),
-    getItem("1", IntegrationDisplayNames11.LiveChat, LiveChatColored),
-    getItem("2", IntegrationDisplayNames11.HelpDesk, HelpDeskColored),
-    getItem("3", IntegrationDisplayNames11.OpenAI, Chatgpt),
-    getItem("4", IntegrationDisplayNames11.Shopify, ShopifyColored),
-    getItem("5", IntegrationDisplayNames11.Mailchimp, Mailchimp)
-    // getItem('6', IntegrationDisplayNames.Stripe, Stripe),
-    // getItem('7', IntegrationDisplayNames.GoogleSheets, GoogleSheets),
+    getItem("All"),
+    getItem(IntegrationDisplayNames12.LiveChat, LiveChatColored),
+    getItem(IntegrationDisplayNames12.HelpDesk, HelpDeskColored),
+    getItem(IntegrationDisplayNames12.OpenAI, Chatgpt),
+    getItem(IntegrationDisplayNames12.Shopify, ShopifyColored),
+    getItem(IntegrationDisplayNames12.Mailchimp, Mailchimp)
+    // getItem(IntegrationDisplayNames.Stripe, Stripe),
+    // getItem(IntegrationDisplayNames.GoogleSheets, GoogleSheets),
   ];
-  const selectedKey = (_a = options.find(
-    (option) => option.element.props.children[1] === status
-  )) == null ? void 0 : _a.key;
   return /* @__PURE__ */ jsx4(
     ActionMenu4,
     {
@@ -24557,7 +24855,7 @@ function WorkflowTemplatesProductFilter({
       },
       options,
       placement: "bottom",
-      selectedOptions: selectedKey ? [selectedKey] : [],
+      selectedOptions: product ? [product] : [],
       triggerRenderer: /* @__PURE__ */ jsxs2(
         Button31,
         {
@@ -24568,7 +24866,7 @@ function WorkflowTemplatesProductFilter({
           },
           children: [
             "Product: ",
-            status
+            product
           ]
         }
       ),
@@ -24579,33 +24877,22 @@ function WorkflowTemplatesProductFilter({
 var Product_default = WorkflowTemplatesProductFilter;
 // src/views/Workflows/List/Home/Cards/Scratch.tsx
-import { useNavigate as useNavigate16 } from "react-router-dom";
 import {
   Heading as Heading6,
   Icon as Icon36,
-  SpacingToken as SpacingToken40
+  SpacingToken as SpacingToken39
 } from "@livechat/design-system-react-components";
-import {
-  BetaTag,
-  Card as Card2,
-  Row as Row22,
-  useUserContext as useUserContext10
-} from "@livechat/developer-studio-ui-react";
+import { BetaTag, Card as Card2, Row as Row22 } from "@livechat/developer-studio-ui-react";
 function WorkflowScratchCard({
   title,
   icon: icon2,
   openOne
 }) {
-  const navigate = useNavigate16();
-  const { user } = useUserContext10();
-  const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
-    user == null ? void 0 : user.meta.email
-  );
+  const navigate = useWorkflowsRelativeNavigate();
+  const journey = useWorkflowsJourney();
   const handleClick = () => {
-    amplitudeWorkflowsJourney.draft.create.actions.click(
-      openOne ? "withAI" : "empty"
-    );
-    navigate("/workflow/new", { state: { openOne } });
+    journey.draft.create.actions.click(openOne ? "withAI" : "empty");
+    navigate("/new", { state: { openOne } });
   };
   return /* @__PURE__ */ jsxs2(Card2, { hover: true, light: true, onClick: handleClick, rounded: true, width: "100%", children: [
     /* @__PURE__ */ jsxs2(Row22, { noWrap: true, notPadded: true, spaceBetween: true, children: [
@@ -24617,7 +24904,7 @@ function WorkflowScratchCard({
       {
         as: "div",
         css: css`
-          margin-top: var(${SpacingToken40.Spacing2});
+          margin-top: var(${SpacingToken39.Spacing2});
         `,
         size: "xs",
         children: title
@@ -24628,11 +24915,10 @@ function WorkflowScratchCard({
 var Scratch_default = WorkflowScratchCard;
 // src/views/Workflows/List/Home/Cards/Template.tsx
-import { useNavigate as useNavigate17 } from "react-router-dom";
 import {
   DesignToken as DesignToken42,
   Heading as Heading7,
-  SpacingToken as SpacingToken41
+  SpacingToken as SpacingToken40
 } from "@livechat/design-system-react-components";
 import { Card as Card3, Column as Column16, Row as Row23 } from "@livechat/developer-studio-ui-react";
 var IconWrapper2 = newStyled.div`
@@ -24641,8 +24927,8 @@ var IconWrapper2 = newStyled.div`
   justify-content: center;
   background-color: var(${DesignToken42.SurfaceSecondaryDefault});
   border-radius: 50%;
-  width: var(${SpacingToken41.Spacing7});
-  height: var(${SpacingToken41.Spacing7});
+  width: var(${SpacingToken40.Spacing7});
+  height: var(${SpacingToken40.Spacing7});
 `;
 function WorkflowTemplateCard({
   id,
@@ -24650,7 +24936,7 @@ function WorkflowTemplateCard({
   icons,
   category
 }) {
-  const navigate = useNavigate17();
+  const navigate = useWorkflowsRelativeNavigate();
   return /* @__PURE__ */ jsx4(
     Card3,
     {
@@ -24666,18 +24952,18 @@ function WorkflowTemplateCard({
       children: /* @__PURE__ */ jsxs2(
         Column16,
         {
-          gap: `var(${SpacingToken41.Spacing4})`,
+          gap: `var(${SpacingToken40.Spacing4})`,
           inheritHeight: true,
           noFlexBasis: true,
           noWrap: true,
           notPadded: true,
           spaceBetween: true,
           children: [
-            /* @__PURE__ */ jsxs2(Column16, { gap: `var(${SpacingToken41.Spacing4})`, noFlexBasis: true, notPadded: true, children: [
+            /* @__PURE__ */ jsxs2(Column16, { gap: `var(${SpacingToken40.Spacing4})`, noFlexBasis: true, notPadded: true, children: [
               /* @__PURE__ */ jsx4(TemplateCategoryIcon_default, { category }),
               /* @__PURE__ */ jsx4(Heading7, { as: "div", size: "xs", children: name })
             ] }),
-            /* @__PURE__ */ jsx4(Row23, { gap: `var(${SpacingToken41.Spacing1})`, noWrap: true, notPadded: true, children: icons.map((icon2, i) => /* @__PURE__ */ jsx4(IconWrapper2, { children: /* @__PURE__ */ jsx4(ProductIcon_default, { height: 5, product: icon2, width: 5 }) }, i.toString())) })
+            /* @__PURE__ */ jsx4(Row23, { gap: `var(${SpacingToken40.Spacing1})`, noWrap: true, notPadded: true, children: icons.map((icon2, i) => /* @__PURE__ */ jsx4(IconWrapper2, { children: /* @__PURE__ */ jsx4(ProductIcon_default, { height: 5, product: icon2, width: 5 }) }, i.toString())) })
           ]
         }
       )
@@ -24691,12 +24977,13 @@ var Grid = newStyled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
   width: 100%;
-  gap: var(${SpacingToken42.Spacing3});
+  gap: var(${SpacingToken41.Spacing3});
 `;
 function WorkflowsHome({ isOnModal }) {
   const [product, setProduct] = useState31("All");
   const [category, setCategory] = useState31("All");
   const flowTemplates = useMemo10(() => getWorkflowTemplates(), []);
+  const journey = useWorkflowsJourney();
   const filters = [
     (template) => product === "All" || template.products.includes(product),
     (template) => category === "All" || template.category.includes(category)
@@ -24709,10 +24996,13 @@ function WorkflowsHome({ isOnModal }) {
     }
     return true;
   });
+  useEffect20(() => {
+    journey.template.list.loaded();
+  }, []);
   return /* @__PURE__ */ jsx4(Column17, { notPadded: true, width: 12, children: /* @__PURE__ */ jsx4(Row24, { notPadded: true, verticalCenter: true, children: /* @__PURE__ */ jsxs2(
     Column17,
     {
-      gap: `var(${SpacingToken42.Spacing3})`,
+      gap: `var(${SpacingToken41.Spacing3})`,
       noFlexBasis: true,
       notPadded: true,
       width: 9,
@@ -24728,7 +25018,7 @@ function WorkflowsHome({ isOnModal }) {
           Row24,
           {
             bottomMargin: true,
-            gap: `var(${SpacingToken42.Spacing3})`,
+            gap: `var(${SpacingToken41.Spacing3})`,
             lowMargin: true,
             noWrap: true,
             notPadded: true,
@@ -24753,28 +25043,28 @@ function WorkflowsHome({ isOnModal }) {
             headerSize: isOnModal ? "xs" : "s"
           }
         ),
-        /* @__PURE__ */ jsxs2(Row24, { gap: `var(${SpacingToken42.Spacing2})`, notPadded: true, children: [
+        /* @__PURE__ */ jsxs2(Row24, { gap: `var(${SpacingToken41.Spacing2})`, notPadded: true, children: [
           /* @__PURE__ */ jsx4(
             Product_default,
             {
-              handleStatus: (status) => {
-                setProduct(status);
+              handleProduct: (product2) => {
+                setProduct(product2);
               },
-              status: product
+              product
             }
           ),
           /* @__PURE__ */ jsx4(
             Category_default,
             {
-              handleStatus: (status) => {
-                setCategory(status);
-              },
-              status: category
+              category,
+              handleCategory: (category2) => {
+                setCategory(category2);
+              }
             }
           )
         ] }),
         /* @__PURE__ */ jsx4(Grid, { children: filteredTemplates.length === 0 ? /* @__PURE__ */ jsx4(
-          Text20,
+          Text19,
           {
             customColor: `var(${DesignToken43.ContentBasicSecondary})`,
             size: "md",
@@ -24798,7 +25088,7 @@ var Home_default = WorkflowsHome;
 // src/views/Workflows/List/Modals/Create/Modal.tsx
 function WorkflowCreateModal({ onClose }) {
-  const navigate = useNavigate18();
+  const navigate = useWorkflowsRelativeNavigate();
   const handleClose = useCallback20(() => {
     if (onClose) {
       onClose();
@@ -24832,12 +25122,11 @@ function WorkflowCreate() {
 var Create_default = WorkflowCreate;
 // src/views/Workflows/List/View.tsx
-import { useState as useState33 } from "react";
-import { useNavigate as useNavigate21 } from "react-router-dom";
+import { useEffect as useEffect21, useState as useState33 } from "react";
 import {
   Button as Button35,
   DesignToken as DesignToken46,
-  SpacingToken as SpacingToken45
+  SpacingToken as SpacingToken44
 } from "@livechat/design-system-react-components";
 import {
   Column as Column18,
@@ -24849,23 +25138,22 @@ import {
 // src/views/Workflows/Creator/LiveChatNavbar.tsx
 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 DesignToken44,
   Heading as Heading8,
   Icon as Icon37,
-  SpacingToken as SpacingToken43
+  SpacingToken as SpacingToken42
 } from "@livechat/design-system-react-components";
 var wrapperCss = (hasData) => css`
   flex-shrink: 0;
-  height: var(${SpacingToken43.Spacing14});
+  height: var(${SpacingToken42.Spacing14});
   width: 100%;
   display: flex;
-  padding: 0 var(${SpacingToken43.Spacing6}) 0 var(${SpacingToken43.Spacing4});
+  padding: 0 var(${SpacingToken42.Spacing6}) 0 var(${SpacingToken42.Spacing4});
   align-items: center;
-  gap: var(${SpacingToken43.Spacing2});
+  gap: var(${SpacingToken42.Spacing2});
   border-bottom: 1px solid var(${DesignToken44.BorderBasicSecondary});
   ${hasData && `> button:last-of-type {
@@ -24873,7 +25161,7 @@ var wrapperCss = (hasData) => css`
   }`}
 `;
 function LiveChatNavbar() {
-  const navigate = useNavigate19();
+  const navigate = useWorkflowsRelativeNavigate();
   const workflows = useFetchWorkflows({});
   const isLoading = workflows.isLoading;
   const hasNoData = workflows.isSuccess && workflows.data.length === 0;
@@ -24980,7 +25268,8 @@ function WorkflowStatusFilter({
 var StatusFilter_default = WorkflowStatusFilter;
 // src/views/Workflows/List/Grid/Table.tsx
-import { useNavigate as useNavigate20 } from "react-router-dom";
+import { useCallback as useCallback22 } from "react";
+import { useLocation as useLocation7 } from "react-router-dom";
 import {
   Delete as Delete3,
   Info as Info2,
@@ -24993,31 +25282,28 @@ import {
   Button as Button34,
   DesignToken as DesignToken45,
   Icon as Icon39,
-  SpacingToken as SpacingToken44,
+  SpacingToken as SpacingToken43,
   Switch as Switch2,
   Tag as Tag4,
-  Text as Text21,
+  Text as Text20,
   Tooltip as Tooltip9
 } from "@livechat/design-system-react-components";
-import { IntegrationNames as IntegrationNames19 } from "@livechat/developer-studio-api";
+import { IntegrationNames as IntegrationNames20 } from "@livechat/developer-studio-api";
 import {
   Loader as Loader4,
   Row as Row25,
   StopPropagation,
   Table,
-  useNotificationContext as useNotificationContext5,
-  useUserContext as useUserContext11
+  useNotificationContext as useNotificationContext5
 } from "@livechat/developer-studio-ui-react";
 function WorkflowsTable({ workflowsQuery, state }) {
   var _a, _b, _c;
-  const navigate = useNavigate20();
+  const location = useLocation7();
+  const navigate = useWorkflowsRelativeNavigate();
   const notifications = useNotificationContext5();
   const deleteAction = useDeleteWorkflow();
   const activateWorkflowAction = useActivateWorkflow();
-  const { user } = useUserContext11();
-  const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
-    user == null ? void 0 : user.meta.email
-  );
+  const journey = useWorkflowsJourney();
   const filteredWorkflows = ((_a = workflowsQuery.data) != null ? _a : []).filter((workflow) => !(workflow.draft && workflow.related_workflow_id)).filter((workflow) => {
     if (state.filters.status === "Active") return workflow.active;
     if (state.filters.status === "Inactive") return !workflow.active;
@@ -25025,9 +25311,48 @@ function WorkflowsTable({ workflowsQuery, state }) {
   }).filter(
     (workflow) => {
       var _a2, _b2, _c2;
-      return workflow.name.toLowerCase().includes((_c2 = (_b2 = (_a2 = state.params) == null ? void 0 : _a2.name) == null ? void 0 : _b2.value) != null ? _c2 : "");
+      return workflow.name.toLowerCase().includes(((_c2 = (_b2 = (_a2 = state.params) == null ? void 0 : _a2.name) == null ? void 0 : _b2.value) != null ? _c2 : "").toLowerCase());
     }
   );
+  const handleSelect = useCallback22(
+    (workflow) => {
+      journey.workflow.edit.actions.click();
+      navigate(`/${workflow.id}`);
+    },
+    [journey.workflow.edit.actions, navigate]
+  );
+  const handleActivate = useCallback22(
+    (workflow) => __async(this, null, function* () {
+      yield activateWorkflowAction.mutateAsync({
+        id: workflow.id,
+        active: !workflow.active
+      });
+    }),
+    [activateWorkflowAction]
+  );
+  const handleDelete = useCallback22(
+    (workflow) => __async(this, null, function* () {
+      journey.workflow.delete.actions.click("list");
+      yield deleteAction.mutateAsync(workflow);
+      if (location.pathname.includes(`/${workflow.id}`)) {
+        navigate("/");
+      }
+      notifications.addSuccessToast("Workflow has been deleted successfully");
+    }),
+    [
+      journey.workflow.delete.actions,
+      deleteAction,
+      location.pathname,
+      navigate,
+      notifications
+    ]
+  );
+  const handleShowDetails = useCallback22(
+    (workflow) => {
+      navigate(`${workflow.id}/info`);
+    },
+    [navigate]
+  );
   return /* @__PURE__ */ jsxs2(Table, { flowTable: true, loading: workflowsQuery.isLoading, children: [
     /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
       /* @__PURE__ */ jsx4("th", { children: "Name" }),
@@ -25037,143 +25362,124 @@ function WorkflowsTable({ workflowsQuery, state }) {
       /* @__PURE__ */ jsx4("th", {})
     ] }) }),
     /* @__PURE__ */ jsx4("tbody", { children: workflowsQuery.isSuccess && filteredWorkflows.length > 0 ? filteredWorkflows.map((workflow) => {
-      var _a2, _b2, _c2, _d, _e, _f, _g;
-      if (workflow.name.toLowerCase().includes((_c2 = (_b2 = (_a2 = state.params) == null ? void 0 : _a2.name) == null ? void 0 : _b2.value) != null ? _c2 : "")) {
-        return /* @__PURE__ */ jsxs2(
-          "tr",
-          {
-            css: css`
-                    transition: background 0.2s;
-                    cursor: pointer;
+      var _a2, _b2, _c2, _d;
+      return /* @__PURE__ */ jsxs2(
+        "tr",
+        {
+          css: css`
+                transition: background 0.2s;
+                cursor: pointer;
-                    &:hover {
-                      background: var(${DesignToken45.SurfacePrimaryHover});
-                    }
-                  `,
-            onClick: () => {
-              amplitudeWorkflowsJourney.workflow.edit.actions.click();
-              navigate(`/workflow/${workflow.id}`);
-            },
-            children: [
-              /* @__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(
-                  Tag4,
-                  {
-                    css: css`
-                            color: #68afff;
-                            flex-shrink: 0;
-                          `,
-                    kind: "info",
-                    size: "small",
-                    children: "Has Draft"
-                  }
-                ) : null
-              ] }) }),
-              /* @__PURE__ */ jsx4("td", { width: "40%", children: /* @__PURE__ */ jsx4(Row25, { gap: 12, notPadded: true, children: (_d = workflow.tags) == null ? void 0 : _d.map((tag) => {
-                const revertIconColor = getWorkflowsEnv("isHeadless") && (tag.toLowerCase() === "openai" || tag.toLowerCase() === IntegrationNames19.BigCommerce.toLowerCase());
-                return /* @__PURE__ */ jsx4(
-                  ProductIcon_default,
-                  {
-                    center: true,
-                    height: 4,
-                    product: tag.toLowerCase(),
-                    revertColors: revertIconColor,
-                    width: 4
-                  },
-                  tag
-                );
-              }) }) }),
-              /* @__PURE__ */ jsx4("td", { children: /* @__PURE__ */ jsx4(
-                Tooltip9,
+                &:hover {
+                  background: var(${DesignToken45.SurfacePrimaryHover});
+                }
+              `,
+          onClick: () => {
+            handleSelect(workflow);
+          },
+          children: [
+            /* @__PURE__ */ jsx4("td", { width: "45%", children: /* @__PURE__ */ jsxs2(Row25, { gap: `var(${SpacingToken43.Spacing2})`, noWrap: true, notPadded: true, children: [
+              /* @__PURE__ */ jsx4(Text20, { noMargin: true, size: "sm", children: workflow.name }),
+              workflow.related_workflow_id ? /* @__PURE__ */ jsx4(
+                Tag4,
                 {
-                  triggerClassName: "tooltip-trigger",
-                  triggerOnHover: true,
-                  triggerRenderer: /* @__PURE__ */ jsx4(StopPropagation, { children: /* @__PURE__ */ jsx4(
-                    Switch2,
-                    {
-                      css: css`
-                              vertical-align: bottom;
-                            `,
-                      on: (_e = workflow.active) != null ? _e : false,
-                      onChange: (e) => {
-                        e.stopPropagation();
-                        void activateWorkflowAction.mutateAsync({
-                          id: workflow.id,
-                          active: !workflow.active
-                        });
-                      },
-                      state: activateWorkflowAction.isLoading && ((_f = activateWorkflowAction.variables) == null ? void 0 : _f.id) === workflow.id ? "loading" : workflow.draft ? "locked" : "regular"
-                    }
-                  ) }),
-                  children: workflow.draft ? "Publish the draft to activate this workflow" : workflow.active ? "Deactivate flow" : "Activate flow"
+                  css: css`
+                        color: #68afff;
+                        flex-shrink: 0;
+                      `,
+                  kind: "info",
+                  size: "small",
+                  children: "Has Draft"
                 }
-              ) }),
-              /* @__PURE__ */ jsx4("td", { children: !workflow.draft && /* @__PURE__ */ jsx4(
-                Button34,
+              ) : null
+            ] }) }),
+            /* @__PURE__ */ jsx4("td", { width: "40%", children: /* @__PURE__ */ jsx4(Row25, { gap: 12, notPadded: true, children: (_a2 = workflow.tags) == null ? void 0 : _a2.map((tag) => {
+              const revertIconColor = getWorkflowsEnv("isHeadless") && (tag.toLowerCase() === "openai" || tag.toLowerCase() === IntegrationNames20.BigCommerce.toLowerCase());
+              return /* @__PURE__ */ jsx4(
+                ProductIcon_default,
                 {
-                  icon: /* @__PURE__ */ jsx4(Icon39, { source: Info2 }),
-                  kind: "plain",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    navigate(`${workflow.id}/info`);
+                  center: true,
+                  height: 4,
+                  product: tag.toLowerCase(),
+                  revertColors: revertIconColor,
+                  width: 4
+                },
+                tag
+              );
+            }) }) }),
+            /* @__PURE__ */ jsx4("td", { children: /* @__PURE__ */ jsx4(
+              Tooltip9,
+              {
+                triggerClassName: "tooltip-trigger",
+                triggerOnHover: true,
+                triggerRenderer: /* @__PURE__ */ jsx4(StopPropagation, { children: /* @__PURE__ */ jsx4(
+                  Switch2,
+                  {
+                    css: css`
+                          vertical-align: bottom;
+                        `,
+                    on: (_b2 = workflow.active) != null ? _b2 : false,
+                    onChange: (e) => {
+                      e.stopPropagation();
+                      void handleActivate(workflow);
+                    },
+                    state: activateWorkflowAction.isLoading && ((_c2 = activateWorkflowAction.variables) == null ? void 0 : _c2.id) === workflow.id ? "loading" : workflow.draft ? "locked" : "regular"
                   }
+                ) }),
+                children: workflow.draft ? "Publish the draft to activate this workflow" : workflow.active ? "Deactivate flow" : "Activate flow"
+              }
+            ) }),
+            /* @__PURE__ */ jsx4("td", { children: !workflow.draft && /* @__PURE__ */ jsx4(
+              Button34,
+              {
+                icon: /* @__PURE__ */ jsx4(Icon39, { source: Info2 }),
+                kind: "plain",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleShowDetails(workflow);
                 }
-              ) }),
-              /* @__PURE__ */ jsx4("td", { align: "right", children: /* @__PURE__ */ jsx4(StopPropagation, { children: /* @__PURE__ */ jsx4(
-                ActionMenu6,
-                {
-                  options: [
-                    {
-                      key: "run",
-                      element: /* @__PURE__ */ jsx4(
-                        ActionMenuItem2,
-                        {
-                          leftNode: /* @__PURE__ */ jsx4(Icon39, { source: PlayArrow }),
-                          children: "Trigger manually"
-                        }
-                      ),
-                      onClick: () => {
-                        navigate(`/workflow/${workflow.id}/execute`);
+              }
+            ) }),
+            /* @__PURE__ */ jsx4("td", { align: "right", children: /* @__PURE__ */ jsx4(StopPropagation, { children: /* @__PURE__ */ jsx4(
+              ActionMenu6,
+              {
+                options: [
+                  {
+                    key: "run",
+                    element: /* @__PURE__ */ jsx4(
+                      ActionMenuItem2,
+                      {
+                        leftNode: /* @__PURE__ */ jsx4(Icon39, { source: PlayArrow }),
+                        children: "Trigger manually"
                       }
-                    },
-                    {
-                      key: "delete",
-                      element: /* @__PURE__ */ jsx4(
-                        ActionMenuItem2,
-                        {
-                          leftNode: /* @__PURE__ */ jsx4(Icon39, { source: Delete3 }),
-                          children: "Delete"
-                        }
-                      ),
-                      onClick: () => void (() => __async(this, null, function* () {
-                        amplitudeWorkflowsJourney.workflow.delete.actions.click(
-                          "list"
-                        );
-                        yield deleteAction.mutateAsync(workflow);
-                        notifications.addSuccessToast(
-                          "Workflow has been deleted successfully"
-                        );
-                      }))()
+                    ),
+                    onClick: () => {
+                      navigate(`/${workflow.id}/execute`);
                     }
-                  ],
-                  triggerRenderer: /* @__PURE__ */ jsx4(
-                    Button34,
-                    {
-                      icon: /* @__PURE__ */ jsx4(Icon39, { source: MoreHoriz2 }),
-                      kind: "text",
-                      loading: deleteAction.isLoading ? ((_g = deleteAction.variables) == null ? void 0 : _g.id) === workflow.id : void 0,
-                      size: "compact"
+                  },
+                  {
+                    key: "delete",
+                    element: /* @__PURE__ */ jsx4(ActionMenuItem2, { leftNode: /* @__PURE__ */ jsx4(Icon39, { source: Delete3 }), children: "Delete" }),
+                    onClick: () => {
+                      void handleDelete(workflow);
                     }
-                  )
-                }
-              ) }) })
-            ]
-          },
-          workflow.id
-        );
-      }
-      return null;
+                  }
+                ],
+                triggerRenderer: /* @__PURE__ */ jsx4(
+                  Button34,
+                  {
+                    icon: /* @__PURE__ */ jsx4(Icon39, { source: MoreHoriz2 }),
+                    kind: "text",
+                    loading: deleteAction.isLoading ? ((_d = deleteAction.variables) == null ? void 0 : _d.id) === workflow.id : void 0,
+                    size: "compact"
+                  }
+                )
+              }
+            ) }) })
+          ]
+        },
+        workflow.id
+      );
     }) : workflowsQuery.isLoading ? /* @__PURE__ */ jsx4("tr", { children: /* @__PURE__ */ jsx4("td", { align: "center", colSpan: 6, children: /* @__PURE__ */ jsx4(Loader4, { size: "medium" }) }) }) : /* @__PURE__ */ jsx4(
       "tr",
       {
@@ -25181,7 +25487,7 @@ function WorkflowsTable({ workflowsQuery, state }) {
               background: transparent !important;
               color: var(${DesignToken45.ContentBasicSecondary});
             `,
-        children: /* @__PURE__ */ jsx4("td", { align: "left", colSpan: 6, children: /* @__PURE__ */ jsxs2(Text21, { as: "div", size: "md", children: [
+        children: /* @__PURE__ */ jsx4("td", { align: "left", colSpan: 6, children: /* @__PURE__ */ jsxs2(Text20, { as: "div", size: "md", children: [
           "There are no",
           " ",
           state.filters.status !== "All" && state.filters.status.toLowerCase(),
@@ -25253,18 +25559,23 @@ var markedStyles = css`
   color: var(${DesignToken46.ActionPrimaryDefault});
 `;
 function WorkflowListView() {
-  var _a;
-  const navigate = useNavigate21();
+  const workflows = useFetchWorkflows();
+  const navigate = useWorkflowsRelativeNavigate();
+  const journey = useWorkflowsJourney();
   const [state, setState] = useState33({
     filters: {
       status: "All",
       tasks: "All"
     }
   });
-  const workflows = useFetchWorkflows((_a = state.params) != null ? _a : {});
   const isLoading = workflows.isLoading && state.params === void 0;
   const hasNoData = workflows.isSuccess && workflows.data.length === 0 && state.params === void 0;
   const hasData = !isLoading && !hasNoData;
+  useEffect21(() => {
+    if (hasData) {
+      journey.workflow.list.loaded();
+    }
+  }, [hasData]);
   if (isLoading) {
     return /* @__PURE__ */ jsx4(Loader5, { stretch: true });
   }
@@ -25280,7 +25591,7 @@ function WorkflowListView() {
             Row26,
             {
               center: true,
-              gap: `var(${SpacingToken45.Spacing2})`,
+              gap: `var(${SpacingToken44.Spacing2})`,
               notPadded: true,
               verticalCenter: true,
               children: [
@@ -25311,7 +25622,7 @@ function WorkflowListView() {
         }
       ) }) : null
     ] }),
-    /* @__PURE__ */ jsx4(Row26, { children: /* @__PURE__ */ jsxs2(Column18, { gap: `var(${SpacingToken45.Spacing10})`, noMaxWidth: true, width: 12, children: [
+    /* @__PURE__ */ jsx4(Row26, { children: /* @__PURE__ */ jsxs2(Column18, { gap: `var(${SpacingToken44.Spacing10})`, noMaxWidth: true, width: 12, children: [
       hasData ? /* @__PURE__ */ jsx4(
         Grid_default,
         {
@@ -25329,8 +25640,12 @@ function WorkflowListView() {
 var View_default2 = WorkflowListView;
 // src/views/Workflows/List/index.tsx
+var wrapperRowStyles = css`
+  overflow: auto;
+  scrollbar-width: none;
+`;
 function WorkflowList() {
-  return /* @__PURE__ */ jsxs2(Row27, { noMaxWidth: true, noWrap: true, notPadded: true, stretch: true, children: [
+  return /* @__PURE__ */ jsxs2(Row27, { css: wrapperRowStyles, noMaxWidth: true, noWrap: true, notPadded: true, stretch: true, children: [
     /* @__PURE__ */ jsx4(View_default2, {}),
     /* @__PURE__ */ jsxs2(Routes5, { children: [
       /* @__PURE__ */ jsx4(Route5, { element: /* @__PURE__ */ jsx4(PreviewTemplate_default, {}), path: "preview/:template" }),
@@ -25344,14 +25659,14 @@ var List_default2 = WorkflowList;
 // src/views/Workflows/index.tsx
 import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function Workflows() {
-  const navigate = useNavigate22();
+  const navigate = useWorkflowsRelativeNavigate();
   const { userHasInstalledWorkflows, isWorkflowAppLoading } = useFetchUserInstalledWorkflows();
-  useEffect21(() => {
+  useEffect22(() => {
     if (isWorkflowAppLoading) {
       return;
     }
     if (!userHasInstalledWorkflows) {
-      navigate("/workflow/waitlist");
+      navigate("/waitlist");
     }
   }, [navigate, isWorkflowAppLoading, userHasInstalledWorkflows]);
   if (isWorkflowAppLoading) {
@@ -25366,7 +25681,7 @@ function Workflows() {
 var Workflows_default = Workflows;
 // src/views/Common/LoginError.tsx
-import { Button as Button36, SpacingToken as SpacingToken46 } from "@livechat/design-system-react-components";
+import { Button as Button36, SpacingToken as SpacingToken45 } from "@livechat/design-system-react-components";
 import {
   Column as Column19,
   Intro as Intro5,
@@ -25378,12 +25693,12 @@ var imgContainerCss2 = css`
   img {
     height: auto;
     max-width: 100%;
-    margin-bottom: var(${SpacingToken46.Spacing10});
+    margin-bottom: var(${SpacingToken45.Spacing10});
   }
 `;
 var paragraphCss = (heading) => css`
     ${heading ? theme.typography.heading.xs : theme.typography.paragraph.s}
-    margin-top: var(${heading ? SpacingToken46.Spacing10 : SpacingToken46.Spacing2});
+    margin-top: var(${heading ? SpacingToken45.Spacing10 : SpacingToken45.Spacing2});
   `;
 var wrapperCss2 = css`
   display: flex;