@livechat/platform-workflows 0.0.81 → 0.0.83

package/dist/index.js

@@ -490,7 +490,7 @@ var getWorkflowsEnv = (key) => {
 };
 
 // src/views/index.tsx
-var import_react_router_dom28 = require("react-router-dom");
+var import_react_router_dom29 = require("react-router-dom");
 
 // src/views/Waitlist/index.tsx
 var import_react3 = require("react");
@@ -2302,13 +2302,14 @@ function Waitlist({ image }) {
 var Waitlist_default = Waitlist;
 
 // src/views/Workflows/index.tsx
-var import_react105 = require("react");
-var import_react_router_dom27 = require("react-router-dom");
+var import_react108 = require("react");
+var import_react_router_dom28 = require("react-router-dom");
 var import_developer_studio_ui_react46 = require("@livechat/developer-studio-ui-react");
 
 // src/views/Workflows/Creator/index.tsx
 var import_react_router_dom17 = require("react-router-dom");
 var import_developer_studio_ui_react34 = require("@livechat/developer-studio-ui-react");
+var import_platform_integrations5 = require("@livechat/platform-integrations");
 
 // src/constants/products.ts
 var OTHER_TYPES = {
@@ -11923,7 +11924,7 @@ function OneMessagesProvider({ children }) {
   const generateAiResponseMutation = useGenerateAIResponse();
   const { user } = (0, import_developer_studio_ui_react4.useUserContext)();
   const isLoading = generateAiResponseMutation.isLoading;
-  const sendMessage = (message) => __async(this, null, function* () {
+  const sendMessage2 = (message) => __async(this, null, function* () {
     setIsError(null);
     setEvents((prevEvents) => [
       ...prevEvents,
@@ -11985,7 +11986,7 @@ function OneMessagesProvider({ children }) {
         isError,
         groupedEvents: eventsGroup,
         hasAdditionalEvents,
-        sendMessage
+        sendMessage: sendMessage2
       },
       children
     }
@@ -12463,7 +12464,7 @@ var validateTasks = (workflow, frames, products) => {
     const resolvingErrors = jsonUtils.getMatchesInObject(task2).map((match2) => {
       const segments = match2.rawValue.split(".");
       const resolved = jsonUtils.resolveTextByContext(match2.value, frame);
-      let message = `Invalid field value`;
+      let message = "Invalid field value";
       const params = {};
       if (!(frame == null ? void 0 : frame[segments[0]])) {
         if (segments[0]) {
@@ -12483,7 +12484,7 @@ var validateTasks = (workflow, frames, products) => {
                 message += " - trigger not found";
               }
             } else if (!workflow.trigger.type || workflow.trigger.type === "recurring" || workflow.trigger.type === "webhook") {
-              message = `Couldn't use manual parameters when trigger is not manual`;
+              message = "Couldn't use manual parameters when trigger is not manual";
             } else {
               message += " - invalid input property";
             }
@@ -12568,7 +12569,7 @@ var validateTasks = (workflow, frames, products) => {
       initial
     );
   }
-  return taskReducer(workflow.definition.tasks, [], `/definition/tasks`);
+  return taskReducer(workflow.definition.tasks, [], "/definition/tasks");
 };
 var validateTrigger = (workflow, frames, products) => {
   var _a;
@@ -12581,7 +12582,7 @@ var validateTrigger = (workflow, frames, products) => {
       frames.trigger
     );
     if (!resolved) {
-      let message = `Invalid field value`;
+      let message = "Invalid field value";
       const params = {};
       if (segments[0] === "workflow") {
         if (segments[1] === "credentials") {
@@ -12615,14 +12616,14 @@ var validateTrigger = (workflow, frames, products) => {
   }).filter(Boolean);
   const connectionErrors = resolvingErrors.filter((error) => error.params.subType === "credentials").map((error) => {
     return {
-      instancePath: `/trigger`,
+      instancePath: "/trigger",
       keyword: "connection",
       message: `Not connected to ${error.params.provider}`,
       params: {}
     };
   });
   const activationError = config2 && config2.customization.provider.startsWith(import_developer_studio_api18.IntegrationNames.Text) && !products.find(({ product }) => product === config2.customization.product) ? {
-    instancePath: `/trigger`,
+    instancePath: "/trigger",
     keyword: "activation",
     message: `${config2.customization.product} not activated`,
     params: {}
@@ -12776,8 +12777,8 @@ var getWorkflowValidation = (workflow, internal, external) => {
     if ("missingProperty" in rawError.params) {
       if (rawError.params.missingProperty) {
         rawError.instancePath = `${rawError.instancePath}/${rawError.params.missingProperty}`;
-        rawError.message = `property is required`;
-        rawError.keyword = `requiredProperty`;
+        rawError.message = "property is required";
+        rawError.keyword = "requiredProperty";
       }
     }
     switch (rawError.keyword) {
@@ -12788,7 +12789,7 @@ var getWorkflowValidation = (workflow, internal, external) => {
           workflow
         )) == null ? void 0 : _a[0] : void 0;
         if (value === null) {
-          message = `This field cannot be empty`;
+          message = "This field cannot be empty";
         } else {
           message = "Invalid value type";
         }
@@ -12797,7 +12798,7 @@ var getWorkflowValidation = (workflow, internal, external) => {
         message = `Field '${rawError.params.missingProperty}' is required`;
         break;
       case "requiredProperty":
-        message = `This field cannot be empty`;
+        message = "This field cannot be empty";
         break;
       case "minLength":
         message = `Must have more than ${rawError.params.limit} characters`;
@@ -13273,30 +13274,33 @@ function WorkflowCreatorProviderBase({
         return;
       }
       setAction("isSaving", true);
-      if (state2.workflow.id) {
-        const updateMutationResult = yield updateWorkflowAction.mutateAsync(
-          state2.workflow
-        );
-        if (!silent) {
-          notifications.addSuccessToast(
-            "Workflow has been updated successfully"
+      try {
+        if (state2.workflow.id) {
+          const updateMutationResult = yield updateWorkflowAction.mutateAsync(
+            state2.workflow
           );
-        }
-        setWorkflow((prevState) => __spreadProps(__spreadValues({}, prevState), {
-          version: updateMutationResult.version
-        }));
-      } else {
-        const workflowId = yield createWorkflowAction.mutateAsync(
-          state2.workflow
-        );
-        if (!silent) {
-          notifications.addSuccessToast(
-            "Workflow has been created successfully"
+          if (!silent) {
+            notifications.addSuccessToast(
+              "Workflow has been updated successfully"
+            );
+          }
+          setWorkflow((prevState) => __spreadProps(__spreadValues({}, prevState), {
+            version: updateMutationResult.version
+          }));
+        } else {
+          const workflowId = yield createWorkflowAction.mutateAsync(
+            state2.workflow
           );
+          if (!silent) {
+            notifications.addSuccessToast(
+              "Workflow has been created successfully"
+            );
+          }
+          navigate(`/workflow/${workflowId}`);
         }
-        navigate(`/workflow/${workflowId}`);
+      } finally {
+        setAction("isSaving", false);
       }
-      setAction("isSaving", false);
     }),
     [
       createWorkflowAction,
@@ -13317,33 +13321,39 @@ function WorkflowCreatorProviderBase({
       return;
     }
     setAction("isActivating", true);
-    yield activateWorkflowAction.mutateAsync({
-      id: state2.workflow.id,
-      active: !state2.workflow.active
-    });
-    setWorkflow((prevState) => __spreadProps(__spreadValues({}, prevState), {
-      active: !prevState.active
-    }));
-    notifications.addSuccessToast(
-      `Workflow has been ${state2.workflow.active ? "deactivated" : "activated"}`
-    );
-    setAction("isActivating", false);
+    try {
+      yield activateWorkflowAction.mutateAsync({
+        id: state2.workflow.id,
+        active: !state2.workflow.active
+      });
+      setWorkflow((prevState) => __spreadProps(__spreadValues({}, prevState), {
+        active: !prevState.active
+      }));
+      notifications.addSuccessToast(
+        `Workflow has been ${state2.workflow.active ? "deactivated" : "activated"}`
+      );
+    } finally {
+      setAction("isActivating", false);
+    }
   }), [activateWorkflowAction, notifications, validate, setWorkflow, setAction]);
   const remove = (0, import_react10.useCallback)(() => __async(this, null, function* () {
     const state2 = autosaveStateRef.current;
     setAction("isRemoving", true);
-    if (state2.workflow.draft) {
-      if (state2.workflow.related_workflow_id) {
-        yield deleteWorkflowAction.mutateAsync({
-          id: state2.workflow.related_workflow_id
-        });
+    try {
+      if (state2.workflow.draft) {
+        if (state2.workflow.related_workflow_id) {
+          yield deleteWorkflowAction.mutateAsync({
+            id: state2.workflow.related_workflow_id
+          });
+        }
+      } else {
+        yield deleteWorkflowAction.mutateAsync(state2.workflow);
       }
-    } else {
-      yield deleteWorkflowAction.mutateAsync(state2.workflow);
+      navigate("/workflow/list");
+      notifications.addSuccessToast("Workflow has been removed successfully");
+    } finally {
+      setAction("isRemoving", false);
     }
-    navigate("/workflow/list");
-    notifications.addSuccessToast("Workflow has been removed successfully");
-    setAction("isRemoving", false);
   }), [setAction, navigate, notifications, deleteWorkflowAction]);
   const createDraft = (0, import_react10.useCallback)(
     (options2) => __async(this, null, function* () {
@@ -13358,19 +13368,22 @@ function WorkflowCreatorProviderBase({
         }
       }
       setAction("isCreating", true);
-      if (state2.workflow.related_workflow_id) {
-        yield deleteWorkflowAction.mutateAsync({
-          id: state2.workflow.related_workflow_id
-        });
+      try {
+        if (state2.workflow.related_workflow_id) {
+          yield deleteWorkflowAction.mutateAsync({
+            id: state2.workflow.related_workflow_id
+          });
+        }
+        const draftId = yield createWorkflowDraftAction.mutateAsync(
+          state2.workflow
+        );
+        navigate(`/workflow/${draftId}`);
+        notifications.addSuccessToast(
+          "Workflow draft has been created successfully"
+        );
+      } finally {
+        setAction("isCreating", false);
       }
-      const draftId = yield createWorkflowDraftAction.mutateAsync(
-        state2.workflow
-      );
-      navigate(`/workflow/${draftId}`);
-      notifications.addSuccessToast(
-        "Workflow draft has been created successfully"
-      );
-      setAction("isCreating", false);
     }),
     [
       createWorkflowDraftAction,
@@ -13397,19 +13410,24 @@ function WorkflowCreatorProviderBase({
         return;
       }
       setAction("isPublishing", true);
-      if (state2.workflow.id) {
-        const { id } = yield publishWorkflowAction.mutateAsync(state2.workflow);
-        navigate(`/workflow/${id}`);
-      } else {
-        const id = yield createWorkflowAction.mutateAsync(__spreadProps(__spreadValues({}, state2.workflow), {
-          draft: false
-        }));
-        navigate(`/workflow/${id}`);
+      try {
+        if (state2.workflow.id) {
+          const { id } = yield publishWorkflowAction.mutateAsync(
+            state2.workflow
+          );
+          navigate(`/workflow/${id}`);
+        } else {
+          const id = yield createWorkflowAction.mutateAsync(__spreadProps(__spreadValues({}, state2.workflow), {
+            draft: false
+          }));
+          navigate(`/workflow/${id}`);
+        }
+        notifications.addSuccessToast(
+          "Workflow draft has been published successfully"
+        );
+      } finally {
+        setAction("isPublishing", false);
       }
-      notifications.addSuccessToast(
-        "Workflow draft has been published successfully"
-      );
-      setAction("isPublishing", false);
     }),
     [
       validate,
@@ -13423,26 +13441,29 @@ function WorkflowCreatorProviderBase({
   const discardDraft = (0, import_react10.useCallback)(() => __async(this, null, function* () {
     const state2 = autosaveStateRef.current;
     setAction("isDiscarding", true);
-    if (state2.workflow.draft) {
-      if (state2.workflow.id) {
-        yield deleteWorkflowAction.mutateAsync(state2.workflow);
-      }
-      if (state2.workflow.related_workflow_id) {
-        navigate(`/workflow/${state2.workflow.related_workflow_id}`);
-      } else {
-        navigate(`/workflow/list`);
+    try {
+      if (state2.workflow.draft) {
+        if (state2.workflow.id) {
+          yield deleteWorkflowAction.mutateAsync(state2.workflow);
+        }
+        if (state2.workflow.related_workflow_id) {
+          navigate(`/workflow/${state2.workflow.related_workflow_id}`);
+        } else {
+          navigate("/workflow/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}`);
       }
-    } 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}`);
+      notifications.addSuccessToast(
+        "Workflow draft has been discarded successfully"
+      );
+    } finally {
+      setAction("isDiscarding", false);
     }
-    notifications.addSuccessToast(
-      "Workflow draft has been discarded successfully"
-    );
-    setAction("isDiscarding", false);
   }), [deleteWorkflowAction, notifications, navigate, setAction]);
   const [previewModalVisible, setPreviewModalVisible] = (0, import_react10.useState)({ isVisible: false });
   return /* @__PURE__ */ jsx4(
@@ -16186,7 +16207,7 @@ function CustomTagsField({
   error,
   trim: trim2,
   disabled,
-  wrapperCss: wrapperCss2,
+  wrapperCss: wrapperCss3,
   onChange
 }) {
   const wrapperRef = (0, import_react33.useRef)(null);
@@ -16194,7 +16215,7 @@ function CustomTagsField({
   (0, import_developer_studio_ui_react15.useOnClickOutside)(wrapperRef, () => {
     setIsPickerVisible(false);
   });
-  return /* @__PURE__ */ jsx4("div", { css: wrapperCss2, ref: wrapperRef, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx4("div", { css: wrapperCss3, ref: wrapperRef, children: /* @__PURE__ */ jsx4(
     CustomTagsInput,
     {
       context,
@@ -18651,16 +18672,16 @@ var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerCont
 var import_lexical = require("lexical");
 var useSendOneMessage = () => {
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
-  const { sendMessage } = (0, import_react61.useContext)(OneMessagesContext);
+  const { sendMessage: sendMessage2 } = (0, import_react61.useContext)(OneMessagesContext);
   const onSend = (0, import_react61.useCallback)(() => {
     var _a;
     const messageToSend = (_a = editor.getRootElement()) == null ? void 0 : _a.innerText.trim();
     if (!messageToSend) {
       return;
     }
-    sendMessage(messageToSend);
+    sendMessage2(messageToSend);
     editor.dispatchCommand(import_lexical.CLEAR_EDITOR_COMMAND, void 0);
-  }, [editor, sendMessage]);
+  }, [editor, sendMessage2]);
   return onSend;
 };
 
@@ -21097,9 +21118,16 @@ function PublishWorkflowModal({
 }
 
 // src/views/Workflows/Creator/View.tsx
+var import_react91 = require("react");
 var import_react_router_dom16 = require("react-router-dom");
+var import_reactflow17 = require("reactflow");
 var import_design_system_react_components69 = require("@livechat/design-system-react-components");
 
+// src/utils/sendMessage.ts
+var sendMessage = (type) => {
+  window.parent.postMessage({ type }, "*");
+};
+
 // src/views/Workflows/Creator/Panels/Details/index.tsx
 var import_react_router_dom13 = require("react-router-dom");
 
@@ -21313,7 +21341,7 @@ function WorkflowDetailsPanel({
             {
               isSelected: tab === "info",
               onClick: () => {
-                navigate(`../info`, { replace: true, relative: "route" });
+                navigate("../info", { replace: true, relative: "route" });
               },
               children: "Info"
             }
@@ -21323,7 +21351,7 @@ function WorkflowDetailsPanel({
             {
               isSelected: tab === "executions",
               onClick: () => {
-                navigate(`../executions`, { replace: true, relative: "route" });
+                navigate("../executions", { replace: true, relative: "route" });
               },
               children: "History"
             }
@@ -21774,42 +21802,25 @@ function WorkflowCreatorNavbar() {
       borderBottom: true,
       center: true,
       css: css`
-        min-height: 70px;
+        min-height: var(${import_design_system_react_components68.SpacingToken.Spacing14});
+        padding-left: var(${import_design_system_react_components68.SpacingToken.Spacing4});
       `,
       flexEnd: true,
       lowMargin: true,
-      lowPadding: true,
       noMaxWidth: true,
       noWrap: true,
       notPadded: true,
-      paddingLeft: true,
       spaceBetween: true,
       children: [
-        getWorkflowsEnv("isHeadless") && /* @__PURE__ */ jsx4(
+        getWorkflowsEnv("isLiveChatMode") && /* @__PURE__ */ jsx4(
           import_design_system_react_components68.Button,
           {
-            css: css`
-            font-size: var(${import_design_system_react_components68.SpacingToken.Spacing4});
-            text-decoration: none;
-          `,
-            kind: "text",
+            icon: /* @__PURE__ */ jsx4(import_design_system_react_components68.Icon, { source: import_design_system_icons32.Close }),
+            kind: "plain",
             onClick: () => {
               navigate("/workflow/list");
-            },
-            children: /* @__PURE__ */ jsxs2(import_developer_studio_ui_react33.Row, { center: true, noWrap: true, notPadded: true, children: [
-              /* @__PURE__ */ jsx4(
-                import_design_system_react_components68.Icon,
-                {
-                  css: css`
-                min-height: var(${import_design_system_react_components68.SpacingToken.Spacing8});
-                min-width: var(${import_design_system_react_components68.SpacingToken.Spacing8});
-              `,
-                  size: "large",
-                  source: import_design_system_icons32.ArrowBarLeft
-                }
-              ),
-              "Workflows"
-            ] })
+              sendMessage("openSideNav" /* OpenSideNav */);
+            }
           }
         ),
         /* @__PURE__ */ jsxs2(import_developer_studio_ui_react33.Row, { center: true, noMaxWidth: true, setRowPadding: "4px 16px", spaceBetween: true, children: [
@@ -21995,6 +22006,22 @@ function WorkflowCreatorView() {
     state: { selection },
     focus
   } = useWorkflowCreator();
+  const { fitView } = (0, import_reactflow17.useReactFlow)();
+  (0, import_react91.useEffect)(() => {
+    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: [
@@ -22028,11 +22055,14 @@ function WorkflowCreator() {
   const { id } = (0, import_react_router_dom17.useParams)();
   const navigate = (0, import_react_router_dom17.useNavigate)();
   const workflowQuery = useFetchWorkflow(id === "new" ? void 0 : id);
+  const credentialsQuery = (0, import_platform_integrations5.useFetchIntegrationCredentialsQuery)();
+  const organizationProducts = (0, import_developer_studio_ui_react34.useFetchOrganizationProducts)();
   useFetchWorkflow((_a = workflowQuery.data) == null ? void 0 : _a.related_workflow_id);
   if (!id) {
     return;
   }
-  if (id !== "new" && workflowQuery.isLoading) {
+  const isLoading = workflowQuery.isLoading || credentialsQuery.isInitialLoading || organizationProducts.isInitialLoading;
+  if (id !== "new" && isLoading) {
     return /* @__PURE__ */ jsx4(import_developer_studio_ui_react34.Loader, { stretch: true });
   }
   if (id !== "new" && !workflowQuery.isSuccess) {
@@ -22155,18 +22185,18 @@ function WorkflowCreator() {
 var Creator_default = WorkflowCreator;
 
 // src/views/Workflows/List/index.tsx
-var import_react_router_dom26 = require("react-router-dom");
+var import_react_router_dom27 = require("react-router-dom");
 var import_developer_studio_ui_react45 = require("@livechat/developer-studio-ui-react");
 
 // src/views/Workflows/List/Modals/Create/index.tsx
 var import_react_router_dom23 = require("react-router-dom");
 
 // src/views/Workflows/List/Modals/PreviewTemplate/index.tsx
-var import_react93 = require("react");
+var import_react94 = require("react");
 var import_react_router_dom19 = require("react-router-dom");
 
 // src/views/Workflows/List/Modals/PreviewTemplate/Modal.tsx
-var import_react91 = require("react");
+var import_react92 = require("react");
 var import_react_router_dom18 = require("react-router-dom");
 var import_design_system_icons34 = require("@livechat/design-system-icons");
 var import_design_system_react_components71 = require("@livechat/design-system-react-components");
@@ -22259,7 +22289,7 @@ function WorkflowTemplatePreviewModal({
   const amplitudeWorkflowsJourney = workflowsBlockAmplitudeJourneyFactory(
     user == null ? void 0 : user.meta.email
   );
-  const handleClose = (0, import_react91.useCallback)(
+  const handleClose = (0, import_react92.useCallback)(
     (target) => {
       if (onClose) {
         onClose();
@@ -22405,7 +22435,7 @@ function WorkflowTemplatePreview({
   workflow,
   onClose
 }) {
-  const flowTemplates = (0, import_react93.useMemo)(() => getWorkflowTemplates(), []);
+  const flowTemplates = (0, import_react94.useMemo)(() => getWorkflowTemplates(), []);
   const params = (0, import_react_router_dom19.useParams)();
   const template = flowTemplates.find((t) => t.id === params.template);
   const targetWorkflow = workflow || (template == null ? void 0 : template.workflow);
@@ -22437,18 +22467,18 @@ function WorkflowTemplatePreview({
 var PreviewTemplate_default = WorkflowTemplatePreview;
 
 // src/views/Workflows/List/Modals/Create/Modal.tsx
-var import_react98 = require("react");
+var import_react99 = require("react");
 var import_react_router_dom22 = require("react-router-dom");
 var import_design_system_react_components77 = require("@livechat/design-system-react-components");
 
 // src/views/Workflows/List/Home/Home.tsx
-var import_react97 = require("react");
+var import_react98 = require("react");
 var import_design_system_icons37 = require("@livechat/design-system-icons");
 var import_design_system_react_components76 = require("@livechat/design-system-react-components");
 var import_developer_studio_ui_react41 = require("@livechat/developer-studio-ui-react");
 
 // src/views/Workflows/List/Modals/TemplateList/Filters/Category.tsx
-var import_react94 = require("react");
+var import_react95 = require("react");
 var import_design_system_icons35 = require("@livechat/design-system-icons");
 var import_design_system_react_components72 = require("@livechat/design-system-react-components");
 var import_developer_studio_api29 = require("@livechat/developer-studio-api");
@@ -22457,8 +22487,9 @@ function WorkflowTemplatesCategoryFilter({
   handleStatus,
   status
 }) {
-  const [isVisible, setIsVisible] = (0, import_react94.useState)(false);
-  const getItem = (0, import_react94.useCallback)(
+  var _a;
+  const [isVisible, setIsVisible] = (0, import_react95.useState)(false);
+  const getItem = (0, import_react95.useCallback)(
     (key, category, icon2) => ({
       key,
       element: /* @__PURE__ */ jsxs2(import_developer_studio_ui_react37.Row, { gap: `var(${import_design_system_react_components72.SpacingToken.Spacing1});`, notPadded: true, children: [
@@ -22472,25 +22503,26 @@ function WorkflowTemplatesCategoryFilter({
     }),
     [handleStatus]
   );
+  const options = [
+    getItem("0", "All"),
+    getItem("1", import_developer_studio_api29.WorkflowTemplateCategory.NotificationAndAlerts, import_design_system_icons35.Notifications),
+    getItem("2", import_developer_studio_api29.WorkflowTemplateCategory.SalesManagement, import_design_system_icons35.CurrencyDollar),
+    getItem("3", import_developer_studio_api29.WorkflowTemplateCategory.LeadCollection, import_design_system_icons35.TargetArrow),
+    getItem("4", import_developer_studio_api29.WorkflowTemplateCategory.ChatManagement, import_design_system_icons35.ChatDots),
+    getItem("5", import_developer_studio_api29.WorkflowTemplateCategory.CustomerExperience, import_design_system_icons35.Smiles)
+  ];
+  const selectedKey = (_a = options.find(
+    (option) => option.element.props.children[1] === status
+  )) == null ? void 0 : _a.key;
   return /* @__PURE__ */ jsx4(
     import_design_system_react_components72.ActionMenu,
     {
       onClose: () => {
         setIsVisible(false);
       },
-      options: [
-        getItem("0", "All"),
-        getItem(
-          "1",
-          import_developer_studio_api29.WorkflowTemplateCategory.NotificationAndAlerts,
-          import_design_system_icons35.Notifications
-        ),
-        getItem("2", import_developer_studio_api29.WorkflowTemplateCategory.SalesManagement, import_design_system_icons35.CurrencyDollar),
-        getItem("3", import_developer_studio_api29.WorkflowTemplateCategory.LeadCollection, import_design_system_icons35.TargetArrow),
-        getItem("4", import_developer_studio_api29.WorkflowTemplateCategory.ChatManagement, import_design_system_icons35.ChatDots),
-        getItem("5", import_developer_studio_api29.WorkflowTemplateCategory.CustomerExperience, import_design_system_icons35.Smiles)
-      ],
+      options,
       placement: "bottom",
+      selectedOptions: selectedKey ? [selectedKey] : [],
       triggerRenderer: /* @__PURE__ */ jsxs2(
         import_design_system_react_components72.Button,
         {
@@ -22512,7 +22544,7 @@ function WorkflowTemplatesCategoryFilter({
 var Category_default = WorkflowTemplatesCategoryFilter;
 
 // src/views/Workflows/List/Modals/TemplateList/Filters/Product.tsx
-var import_react95 = require("react");
+var import_react96 = require("react");
 var import_design_system_icons36 = require("@livechat/design-system-icons");
 var import_design_system_react_components73 = require("@livechat/design-system-react-components");
 var import_developer_studio_api30 = require("@livechat/developer-studio-api");
@@ -22521,8 +22553,9 @@ function WorkflowTemplatesProductFilter({
   handleStatus,
   status
 }) {
-  const [isVisible, setIsVisible] = (0, import_react95.useState)(false);
-  const getItem = (0, import_react95.useCallback)(
+  var _a;
+  const [isVisible, setIsVisible] = (0, import_react96.useState)(false);
+  const getItem = (0, import_react96.useCallback)(
     (key, product, icon2) => ({
       key,
       element: /* @__PURE__ */ jsxs2(import_developer_studio_ui_react38.Row, { gap: `var(${import_design_system_react_components73.SpacingToken.Spacing1});`, notPadded: true, children: [
@@ -22536,23 +22569,28 @@ function WorkflowTemplatesProductFilter({
     }),
     [handleStatus]
   );
+  const options = [
+    getItem("0", "All"),
+    getItem("1", import_developer_studio_api30.IntegrationDisplayNames.LiveChat, import_design_system_icons36.LiveChatColored),
+    getItem("2", import_developer_studio_api30.IntegrationDisplayNames.HelpDesk, import_design_system_icons36.HelpDeskColored),
+    getItem("3", import_developer_studio_api30.IntegrationDisplayNames.OpenAI, import_design_system_icons36.Chatgpt),
+    getItem("4", import_developer_studio_api30.IntegrationDisplayNames.Shopify, import_design_system_icons36.ShopifyColored),
+    getItem("5", import_developer_studio_api30.IntegrationDisplayNames.Mailchimp, import_design_system_icons36.Mailchimp)
+    // getItem('6', IntegrationDisplayNames.Stripe, Stripe),
+    // getItem('7', IntegrationDisplayNames.GoogleSheets, GoogleSheets),
+  ];
+  const selectedKey = (_a = options.find(
+    (option) => option.element.props.children[1] === status
+  )) == null ? void 0 : _a.key;
   return /* @__PURE__ */ jsx4(
     import_design_system_react_components73.ActionMenu,
     {
       onClose: () => {
         setIsVisible(false);
       },
-      options: [
-        getItem("0", "All"),
-        getItem("1", import_developer_studio_api30.IntegrationDisplayNames.LiveChat, import_design_system_icons36.LiveChatColored),
-        getItem("2", import_developer_studio_api30.IntegrationDisplayNames.HelpDesk, import_design_system_icons36.HelpDeskColored),
-        getItem("3", import_developer_studio_api30.IntegrationDisplayNames.OpenAI, import_design_system_icons36.Chatgpt),
-        getItem("4", import_developer_studio_api30.IntegrationDisplayNames.Shopify, import_design_system_icons36.ShopifyColored),
-        getItem("5", import_developer_studio_api30.IntegrationDisplayNames.Mailchimp, import_design_system_icons36.Mailchimp)
-        // getItem('6', IntegrationDisplayNames.Stripe, Stripe),
-        // getItem('7', IntegrationDisplayNames.GoogleSheets, GoogleSheets),
-      ],
+      options,
       placement: "bottom",
+      selectedOptions: selectedKey ? [selectedKey] : [],
       triggerRenderer: /* @__PURE__ */ jsxs2(
         import_design_system_react_components73.Button,
         {
@@ -22676,9 +22714,9 @@ var Grid = newStyled.div`
   gap: var(${import_design_system_react_components76.SpacingToken.Spacing3});
 `;
 function WorkflowsHome({ isOnModal }) {
-  const [product, setProduct] = (0, import_react97.useState)("All");
-  const [category, setCategory] = (0, import_react97.useState)("All");
-  const flowTemplates = (0, import_react97.useMemo)(() => getWorkflowTemplates(), []);
+  const [product, setProduct] = (0, import_react98.useState)("All");
+  const [category, setCategory] = (0, import_react98.useState)("All");
+  const flowTemplates = (0, import_react98.useMemo)(() => getWorkflowTemplates(), []);
   const filters = [
     (template) => product === "All" || template.products.includes(product),
     (template) => category === "All" || template.category.includes(category)
@@ -22781,7 +22819,7 @@ var Home_default = WorkflowsHome;
 // src/views/Workflows/List/Modals/Create/Modal.tsx
 function WorkflowCreateModal({ onClose }) {
   const navigate = (0, import_react_router_dom22.useNavigate)();
-  const handleClose = (0, import_react98.useCallback)(() => {
+  const handleClose = (0, import_react99.useCallback)(() => {
     if (onClose) {
       onClose();
       return;
@@ -22814,25 +22852,78 @@ function WorkflowCreate() {
 var Create_default = WorkflowCreate;
 
 // src/views/Workflows/List/View.tsx
-var import_react103 = require("react");
-var import_react_router_dom25 = require("react-router-dom");
-var import_design_system_react_components81 = require("@livechat/design-system-react-components");
+var import_react106 = require("react");
+var import_react_router_dom26 = require("react-router-dom");
+var import_design_system_react_components82 = require("@livechat/design-system-react-components");
 var import_developer_studio_api32 = require("@livechat/developer-studio-api");
 var import_developer_studio_ui_react44 = require("@livechat/developer-studio-ui-react");
 
+// src/views/Workflows/Creator/LiveChatNavbar.tsx
+var import_react101 = require("react");
+var import_react_router_dom24 = require("react-router-dom");
+var import_design_system_icons38 = require("@livechat/design-system-icons");
+var import_design_system_react_components78 = require("@livechat/design-system-react-components");
+var wrapperCss = (hasData) => css`
+  flex-shrink: 0;
+  height: var(${import_design_system_react_components78.SpacingToken.Spacing14});
+  width: 100%;
+  display: flex;
+  padding: 0 var(${import_design_system_react_components78.SpacingToken.Spacing6}) 0 var(${import_design_system_react_components78.SpacingToken.Spacing4});
+  align-items: center;
+  gap: var(${import_design_system_react_components78.SpacingToken.Spacing2});
+  border-bottom: 1px solid var(${import_design_system_react_components78.DesignToken.BorderBasicSecondary});
+
+  ${hasData && `> button:last-of-type {
+    margin-left: auto;
+  }`}
+`;
+function LiveChatNavbar() {
+  const navigate = (0, import_react_router_dom24.useNavigate)();
+  const workflows = useFetchWorkflows({});
+  const isLoading = workflows.isLoading;
+  const hasNoData = workflows.isSuccess && workflows.data.length === 0;
+  const hasData = !isLoading && !hasNoData;
+  const handleClick = (0, import_react101.useCallback)(() => {
+    sendMessage("toggleSideNav" /* ToggleSideNav */);
+  }, []);
+  return /* @__PURE__ */ jsxs2("div", { css: wrapperCss(hasData), children: [
+    /* @__PURE__ */ jsx4(
+      import_design_system_react_components78.Button,
+      {
+        icon: /* @__PURE__ */ jsx4(import_design_system_react_components78.Icon, { source: import_design_system_icons38.LayoutSidebarLeft }),
+        kind: "plain",
+        onClick: handleClick
+      }
+    ),
+    /* @__PURE__ */ jsx4(import_design_system_react_components78.Heading, { size: "sm", children: "Workflows" }),
+    hasData ? /* @__PURE__ */ jsx4(
+      import_design_system_react_components78.Button,
+      {
+        kind: "primary",
+        onClick: () => {
+          navigate("create");
+        },
+        children: "Create workflow"
+      }
+    ) : null
+  ] });
+}
+var LiveChatNavbar_default = LiveChatNavbar;
+
 // src/views/Workflows/List/Grid/Grid.tsx
-var import_design_system_react_components80 = require("@livechat/design-system-react-components");
+var import_design_system_react_components81 = require("@livechat/design-system-react-components");
 var import_developer_studio_ui_react43 = require("@livechat/developer-studio-ui-react");
 
 // src/views/Workflows/List/Grid/Filters/StatusFilter.tsx
-var import_react100 = require("react");
-var import_design_system_icons38 = require("@livechat/design-system-icons");
-var import_design_system_react_components78 = require("@livechat/design-system-react-components");
+var import_react103 = require("react");
+var import_design_system_icons39 = require("@livechat/design-system-icons");
+var import_design_system_react_components79 = require("@livechat/design-system-react-components");
 function WorkflowStatusFilter({
   handleStatus,
   status
 }) {
-  const [isVisible, setIsVisible] = (0, import_react100.useState)(false);
+  var _a;
+  const [isVisible, setIsVisible] = (0, import_react103.useState)(false);
   const items = [
     {
       key: "0",
@@ -22859,18 +22950,20 @@ function WorkflowStatusFilter({
       }
     }
   ];
+  const selectedKey = (_a = items.find((item) => item.element === status)) == null ? void 0 : _a.key;
   return /* @__PURE__ */ jsx4(
-    import_design_system_react_components78.ActionMenu,
+    import_design_system_react_components79.ActionMenu,
     {
       onClose: () => {
         setIsVisible(false);
       },
       options: items,
       placement: "bottom",
+      selectedOptions: selectedKey ? [selectedKey] : [],
       triggerRenderer: /* @__PURE__ */ jsxs2(
-        import_design_system_react_components78.Button,
+        import_design_system_react_components79.Button,
         {
-          icon: /* @__PURE__ */ jsx4(import_design_system_react_components78.Icon, { source: import_design_system_icons38.ToggleLeft }),
+          icon: /* @__PURE__ */ jsx4(import_design_system_react_components79.Icon, { source: import_design_system_icons39.ToggleLeft }),
           kind: "secondary",
           onClick: () => {
             setIsVisible(!isVisible);
@@ -22888,14 +22981,14 @@ function WorkflowStatusFilter({
 var StatusFilter_default = WorkflowStatusFilter;
 
 // src/views/Workflows/List/Grid/Table.tsx
-var import_react_router_dom24 = require("react-router-dom");
-var import_design_system_icons39 = require("@livechat/design-system-icons");
-var import_design_system_react_components79 = require("@livechat/design-system-react-components");
+var import_react_router_dom25 = require("react-router-dom");
+var import_design_system_icons40 = require("@livechat/design-system-icons");
+var import_design_system_react_components80 = require("@livechat/design-system-react-components");
 var import_developer_studio_api31 = require("@livechat/developer-studio-api");
 var import_developer_studio_ui_react42 = require("@livechat/developer-studio-ui-react");
 function WorkflowsTable({ workflowsQuery, state }) {
   var _a, _b, _c;
-  const navigate = (0, import_react_router_dom24.useNavigate)();
+  const navigate = (0, import_react_router_dom25.useNavigate)();
   const notifications = (0, import_developer_studio_ui_react42.useNotificationContext)();
   const deleteAction = useDeleteWorkflow();
   const activateWorkflowAction = useActivateWorkflow();
@@ -22932,7 +23025,7 @@ function WorkflowsTable({ workflowsQuery, state }) {
                     cursor: pointer;
 
                     &:hover {
-                      background: var(${import_design_system_react_components79.DesignToken.SurfacePrimaryHover});
+                      background: var(${import_design_system_react_components80.DesignToken.SurfacePrimaryHover});
                     }
                   `,
             onClick: () => {
@@ -22940,10 +23033,10 @@ function WorkflowsTable({ workflowsQuery, state }) {
               navigate(`/workflow/${workflow.id}`);
             },
             children: [
-              /* @__PURE__ */ jsx4("td", { width: "45%", children: /* @__PURE__ */ jsxs2(import_developer_studio_ui_react42.Row, { gap: `var(${import_design_system_react_components79.SpacingToken.Spacing2})`, noWrap: true, notPadded: true, children: [
-                /* @__PURE__ */ jsx4(import_design_system_react_components79.Text, { noMargin: true, size: "sm", children: workflow.name }),
+              /* @__PURE__ */ jsx4("td", { width: "45%", children: /* @__PURE__ */ jsxs2(import_developer_studio_ui_react42.Row, { gap: `var(${import_design_system_react_components80.SpacingToken.Spacing2})`, noWrap: true, notPadded: true, children: [
+                /* @__PURE__ */ jsx4(import_design_system_react_components80.Text, { noMargin: true, size: "sm", children: workflow.name }),
                 workflow.related_workflow_id ? /* @__PURE__ */ jsx4(
-                  import_design_system_react_components79.Tag,
+                  import_design_system_react_components80.Tag,
                   {
                     css: css`
                             color: #68afff;
@@ -22970,12 +23063,12 @@ function WorkflowsTable({ workflowsQuery, state }) {
                 );
               }) }) }),
               /* @__PURE__ */ jsx4("td", { children: /* @__PURE__ */ jsx4(
-                import_design_system_react_components79.Tooltip,
+                import_design_system_react_components80.Tooltip,
                 {
                   triggerClassName: "tooltip-trigger",
                   triggerOnHover: true,
                   triggerRenderer: /* @__PURE__ */ jsx4(import_developer_studio_ui_react42.StopPropagation, { children: /* @__PURE__ */ jsx4(
-                    import_design_system_react_components79.Switch,
+                    import_design_system_react_components80.Switch,
                     {
                       css: css`
                               vertical-align: bottom;
@@ -22995,9 +23088,9 @@ function WorkflowsTable({ workflowsQuery, state }) {
                 }
               ) }),
               /* @__PURE__ */ jsx4("td", { children: !workflow.draft && /* @__PURE__ */ jsx4(
-                import_design_system_react_components79.Button,
+                import_design_system_react_components80.Button,
                 {
-                  icon: /* @__PURE__ */ jsx4(import_design_system_react_components79.Icon, { source: import_design_system_icons39.Info }),
+                  icon: /* @__PURE__ */ jsx4(import_design_system_react_components80.Icon, { source: import_design_system_icons40.Info }),
                   kind: "plain",
                   onClick: (e) => {
                     e.stopPropagation();
@@ -23006,15 +23099,15 @@ function WorkflowsTable({ workflowsQuery, state }) {
                 }
               ) }),
               /* @__PURE__ */ jsx4("td", { align: "right", children: /* @__PURE__ */ jsx4(import_developer_studio_ui_react42.StopPropagation, { children: /* @__PURE__ */ jsx4(
-                import_design_system_react_components79.ActionMenu,
+                import_design_system_react_components80.ActionMenu,
                 {
                   options: [
                     {
                       key: "run",
                       element: /* @__PURE__ */ jsx4(
-                        import_design_system_react_components79.ActionMenuItem,
+                        import_design_system_react_components80.ActionMenuItem,
                         {
-                          leftNode: /* @__PURE__ */ jsx4(import_design_system_react_components79.Icon, { source: import_design_system_icons39.PlayArrow }),
+                          leftNode: /* @__PURE__ */ jsx4(import_design_system_react_components80.Icon, { source: import_design_system_icons40.PlayArrow }),
                           children: "Trigger manually"
                         }
                       ),
@@ -23025,9 +23118,9 @@ function WorkflowsTable({ workflowsQuery, state }) {
                     {
                       key: "delete",
                       element: /* @__PURE__ */ jsx4(
-                        import_design_system_react_components79.ActionMenuItem,
+                        import_design_system_react_components80.ActionMenuItem,
                         {
-                          leftNode: /* @__PURE__ */ jsx4(import_design_system_react_components79.Icon, { source: import_design_system_icons39.Delete }),
+                          leftNode: /* @__PURE__ */ jsx4(import_design_system_react_components80.Icon, { source: import_design_system_icons40.Delete }),
                           children: "Delete"
                         }
                       ),
@@ -23043,9 +23136,9 @@ function WorkflowsTable({ workflowsQuery, state }) {
                     }
                   ],
                   triggerRenderer: /* @__PURE__ */ jsx4(
-                    import_design_system_react_components79.Button,
+                    import_design_system_react_components80.Button,
                     {
-                      icon: /* @__PURE__ */ jsx4(import_design_system_react_components79.Icon, { source: import_design_system_icons39.MoreHoriz }),
+                      icon: /* @__PURE__ */ jsx4(import_design_system_react_components80.Icon, { source: import_design_system_icons40.MoreHoriz }),
                       kind: "text",
                       loading: deleteAction.isLoading ? ((_g = deleteAction.variables) == null ? void 0 : _g.id) === workflow.id : void 0,
                       size: "compact"
@@ -23064,9 +23157,9 @@ function WorkflowsTable({ workflowsQuery, state }) {
       {
         css: css`
               background: transparent !important;
-              color: var(${import_design_system_react_components79.DesignToken.ContentBasicSecondary});
+              color: var(${import_design_system_react_components80.DesignToken.ContentBasicSecondary});
             `,
-        children: /* @__PURE__ */ jsx4("td", { align: "left", colSpan: 6, children: /* @__PURE__ */ jsxs2(import_design_system_react_components79.Text, { as: "div", size: "md", children: [
+        children: /* @__PURE__ */ jsx4("td", { align: "left", colSpan: 6, children: /* @__PURE__ */ jsxs2(import_design_system_react_components80.Text, { as: "div", size: "md", children: [
           "There are no",
           " ",
           state.filters.status !== "All" && state.filters.status.toLowerCase(),
@@ -23106,7 +23199,7 @@ function WorkflowsGrid({
           }
         ),
         right: /* @__PURE__ */ jsx4(
-          import_design_system_react_components80.SearchInput,
+          import_design_system_react_components81.SearchInput,
           {
             css: () => css`
               min-width: 250px;
@@ -23135,12 +23228,12 @@ var Grid_default = WorkflowsGrid;
 
 // src/views/Workflows/List/View.tsx
 var markedStyles = css`
-  color: var(${import_design_system_react_components81.DesignToken.ActionPrimaryDefault});
+  color: var(${import_design_system_react_components82.DesignToken.ActionPrimaryDefault});
 `;
 function WorkflowListView() {
   var _a;
-  const navigate = (0, import_react_router_dom25.useNavigate)();
-  const [state, setState] = (0, import_react103.useState)({
+  const navigate = (0, import_react_router_dom26.useNavigate)();
+  const [state, setState] = (0, import_react106.useState)({
     filters: {
       status: "All",
       tasks: "All"
@@ -23154,6 +23247,7 @@ function WorkflowListView() {
     return /* @__PURE__ */ jsx4(import_developer_studio_ui_react44.Loader, { stretch: true });
   }
   return /* @__PURE__ */ jsxs2(import_developer_studio_ui_react44.View, { center: hasNoData, noWrap: true, stretch: isLoading, children: [
+    getWorkflowsEnv("isLiveChatMode") ? /* @__PURE__ */ jsx4(import_developer_studio_ui_react44.Row, { noMaxWidth: true, notPadded: true, children: /* @__PURE__ */ jsx4(LiveChatNavbar_default, {}) }) : null,
     /* @__PURE__ */ jsxs2(import_developer_studio_ui_react44.Row, { topMargin: true, verticalCenter: hasNoData, children: [
       /* @__PURE__ */ jsx4(import_developer_studio_ui_react44.Column, { width: hasNoData ? 10 : 8, children: hasNoData ? /* @__PURE__ */ jsx4(import_developer_studio_ui_react44.Row, { notPadded: true, children: /* @__PURE__ */ jsx4(
         import_developer_studio_ui_react44.Intro,
@@ -23164,7 +23258,7 @@ function WorkflowListView() {
             import_developer_studio_ui_react44.Row,
             {
               center: true,
-              gap: `var(${import_design_system_react_components81.SpacingToken.Spacing2})`,
+              gap: `var(${import_design_system_react_components82.SpacingToken.Spacing2})`,
               notPadded: true,
               verticalCenter: true,
               children: [
@@ -23184,8 +23278,8 @@ function WorkflowListView() {
           header: "Your workflows"
         }
       ) }),
-      hasData ? /* @__PURE__ */ jsx4(import_developer_studio_ui_react44.Column, { pullRight: true, children: /* @__PURE__ */ jsx4(
-        import_design_system_react_components81.Button,
+      hasData && !getWorkflowsEnv("isHeadless") ? /* @__PURE__ */ jsx4(import_developer_studio_ui_react44.Column, { pullRight: true, children: /* @__PURE__ */ jsx4(
+        import_design_system_react_components82.Button,
         {
           kind: "primary",
           onClick: () => {
@@ -23195,7 +23289,7 @@ function WorkflowListView() {
         }
       ) }) : null
     ] }),
-    /* @__PURE__ */ jsx4(import_developer_studio_ui_react44.Row, { children: /* @__PURE__ */ jsxs2(import_developer_studio_ui_react44.Column, { gap: `var(${import_design_system_react_components81.SpacingToken.Spacing10})`, noMaxWidth: true, width: 12, children: [
+    /* @__PURE__ */ jsx4(import_developer_studio_ui_react44.Row, { children: /* @__PURE__ */ jsxs2(import_developer_studio_ui_react44.Column, { gap: `var(${import_design_system_react_components82.SpacingToken.Spacing10})`, noMaxWidth: true, width: 12, children: [
       hasData ? /* @__PURE__ */ jsx4(
         Grid_default,
         {
@@ -23216,21 +23310,21 @@ var View_default2 = WorkflowListView;
 function WorkflowList() {
   return /* @__PURE__ */ jsxs2(import_developer_studio_ui_react45.Row, { noMaxWidth: true, noWrap: true, notPadded: true, stretch: true, children: [
     /* @__PURE__ */ jsx4(View_default2, {}),
-    /* @__PURE__ */ jsxs2(import_react_router_dom26.Routes, { children: [
-      /* @__PURE__ */ jsx4(import_react_router_dom26.Route, { element: /* @__PURE__ */ jsx4(PreviewTemplate_default, {}), path: "preview/:template" }),
-      /* @__PURE__ */ jsx4(import_react_router_dom26.Route, { element: /* @__PURE__ */ jsx4(Create_default, {}), path: "create/*" }),
-      /* @__PURE__ */ jsx4(import_react_router_dom26.Route, { element: /* @__PURE__ */ jsx4(WorkflowDetails, { headerType: "name" }), path: ":id/*" })
+    /* @__PURE__ */ jsxs2(import_react_router_dom27.Routes, { children: [
+      /* @__PURE__ */ jsx4(import_react_router_dom27.Route, { element: /* @__PURE__ */ jsx4(PreviewTemplate_default, {}), path: "preview/:template" }),
+      /* @__PURE__ */ jsx4(import_react_router_dom27.Route, { element: /* @__PURE__ */ jsx4(Create_default, {}), path: "create/*" }),
+      /* @__PURE__ */ jsx4(import_react_router_dom27.Route, { element: /* @__PURE__ */ jsx4(WorkflowDetails, { headerType: "name" }), path: ":id/*" })
     ] })
   ] });
 }
 var List_default2 = WorkflowList;
 
 // src/views/Workflows/index.tsx
-var import_jsx_runtime115 = require("react/jsx-runtime");
+var import_jsx_runtime116 = require("react/jsx-runtime");
 function Workflows() {
-  const navigate = (0, import_react_router_dom27.useNavigate)();
+  const navigate = (0, import_react_router_dom28.useNavigate)();
   const { userHasInstalledWorkflows, isWorkflowAppLoading } = useFetchUserInstalledWorkflows();
-  (0, import_react105.useEffect)(() => {
+  (0, import_react108.useEffect)(() => {
     if (isWorkflowAppLoading) {
       return;
     }
@@ -23239,31 +23333,31 @@ function Workflows() {
     }
   }, [navigate, isWorkflowAppLoading, userHasInstalledWorkflows]);
   if (isWorkflowAppLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_developer_studio_ui_react46.Loader, { stretch: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_developer_studio_ui_react46.Loader, { stretch: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_react_router_dom27.Routes, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_router_dom27.Route, { element: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_router_dom27.Navigate, { replace: true, to: "list" }), path: "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_router_dom27.Route, { element: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(List_default2, {}), path: "list/*" }),
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_router_dom27.Route, { element: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Creator_default, {}), path: ":id/*" })
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(import_react_router_dom28.Routes, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react_router_dom28.Route, { element: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react_router_dom28.Navigate, { replace: true, to: "list" }), path: "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react_router_dom28.Route, { element: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(List_default2, {}), path: "list/*" }),
+    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react_router_dom28.Route, { element: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Creator_default, {}), path: ":id/*" })
   ] });
 }
 var Workflows_default = Workflows;
 
 // src/views/Common/LoginError.tsx
-var import_design_system_react_components82 = require("@livechat/design-system-react-components");
+var import_design_system_react_components83 = require("@livechat/design-system-react-components");
 var import_developer_studio_ui_react47 = require("@livechat/developer-studio-ui-react");
 var imgContainerCss2 = css`
   img {
     height: auto;
     max-width: 100%;
-    margin-bottom: var(${import_design_system_react_components82.SpacingToken.Spacing10});
+    margin-bottom: var(${import_design_system_react_components83.SpacingToken.Spacing10});
   }
 `;
 var paragraphCss = (heading) => css`
     ${heading ? import_developer_studio_ui_react47.theme.typography.heading.xs : import_developer_studio_ui_react47.theme.typography.paragraph.s}
-    margin-top: var(${heading ? import_design_system_react_components82.SpacingToken.Spacing10 : import_design_system_react_components82.SpacingToken.Spacing2});
+    margin-top: var(${heading ? import_design_system_react_components83.SpacingToken.Spacing10 : import_design_system_react_components83.SpacingToken.Spacing2});
   `;
-var wrapperCss = css`
+var wrapperCss2 = css`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -23277,12 +23371,12 @@ function LoginErrorPage({
   onAuthorize
 }) {
   if (getWorkflowsEnv("isHeadless")) {
-    return /* @__PURE__ */ jsxs2("div", { css: wrapperCss, children: [
+    return /* @__PURE__ */ jsxs2("div", { css: wrapperCss2, children: [
       /* @__PURE__ */ jsx4(import_developer_studio_ui_react47.Row, { center: true, noMaxWidth: true, verticalCenter: true, children: /* @__PURE__ */ jsx4(import_developer_studio_ui_react47.Column, { center: true, width: 10, children: /* @__PURE__ */ jsx4("div", { css: imgContainerCss2, children: welcomeImage }) }) }),
       /* @__PURE__ */ jsx4(import_developer_studio_ui_react47.Row, { center: true, noMaxWidth: true, verticalCenter: true, children: /* @__PURE__ */ jsxs2(import_developer_studio_ui_react47.Column, { center: true, width: 10, children: [
         /* @__PURE__ */ jsx4(import_developer_studio_ui_react47.Intro, { center: true, header: "Welcome to Workflows!", headerSize: "m" }),
         /* @__PURE__ */ jsx4("p", { css: paragraphCss(false), children: "You're using a browser that required additional login to access Workflows" }),
-        /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(import_design_system_react_components82.Button, { kind: "primary", onClick: onAuthorize, children: "Login with Text" }) })
+        /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(import_design_system_react_components83.Button, { kind: "primary", onClick: onAuthorize, children: "Login with Text" }) })
       ] }) })
     ] });
   }
@@ -23291,11 +23385,11 @@ function LoginErrorPage({
 var LoginError_default = LoginErrorPage;
 
 // src/views/index.tsx
-var import_jsx_runtime117 = require("react/jsx-runtime");
+var import_jsx_runtime118 = require("react/jsx-runtime");
 function WorkflowsModule({ waitlistImage }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_react_router_dom28.Routes, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_react_router_dom28.Route, { element: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Workflows_default, {}), path: "*" }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_react_router_dom28.Route, { element: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Waitlist_default, { image: waitlistImage }), path: "/waitlist" })
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_react_router_dom29.Routes, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_react_router_dom29.Route, { element: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Workflows_default, {}), path: "*" }),
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_react_router_dom29.Route, { element: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Waitlist_default, { image: waitlistImage }), path: "/waitlist" })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node: