@livechat/platform-workflows 0.0.81 → 0.0.83

package/dist/index.mjs

@@ -2300,19 +2300,23 @@ function Waitlist({ image }) {
 var Waitlist_default = Waitlist;
 
 // src/views/Workflows/index.tsx
-import { useEffect as useEffect18 } from "react";
-import { Navigate as Navigate2, Route as Route6, Routes as Routes6, useNavigate as useNavigate20 } from "react-router-dom";
+import { useEffect as useEffect19 } from "react";
+import { Navigate as Navigate2, Route as Route6, Routes as Routes6, useNavigate as useNavigate21 } 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,
+  useLocation as useLocation5,
   useNavigate as useNavigate13,
   useParams as useParams4
 } from "react-router-dom";
-import { Loader as Loader3 } from "@livechat/developer-studio-ui-react";
+import {
+  Loader as Loader3,
+  useFetchOrganizationProducts as useFetchOrganizationProducts2
+} from "@livechat/developer-studio-ui-react";
+import { useFetchIntegrationCredentialsQuery as useFetchIntegrationCredentialsQuery2 } from "@livechat/platform-integrations";
 
 // src/constants/products.ts
 var OTHER_TYPES = {
@@ -12000,7 +12004,7 @@ function OneMessagesProvider({ children }) {
   const generateAiResponseMutation = useGenerateAIResponse();
   const { user } = useUserContext2();
   const isLoading = generateAiResponseMutation.isLoading;
-  const sendMessage = (message) => __async(this, null, function* () {
+  const sendMessage2 = (message) => __async(this, null, function* () {
     setIsError(null);
     setEvents((prevEvents) => [
       ...prevEvents,
@@ -12062,7 +12066,7 @@ function OneMessagesProvider({ children }) {
         isError,
         groupedEvents: eventsGroup,
         hasAdditionalEvents,
-        sendMessage
+        sendMessage: sendMessage2
       },
       children
     }
@@ -12540,7 +12544,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]) {
@@ -12560,7 +12564,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";
             }
@@ -12645,7 +12649,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;
@@ -12658,7 +12662,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") {
@@ -12692,14 +12696,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(IntegrationNames12.Text) && !products.find(({ product }) => product === config2.customization.product) ? {
-    instancePath: `/trigger`,
+    instancePath: "/trigger",
     keyword: "activation",
     message: `${config2.customization.product} not activated`,
     params: {}
@@ -12853,8 +12857,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) {
@@ -12865,7 +12869,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";
         }
@@ -12874,7 +12878,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`;
@@ -13350,30 +13354,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,
@@ -13394,33 +13401,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 = useCallback2(() => __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 = useCallback2(
     (options2) => __async(this, null, function* () {
@@ -13435,19 +13448,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,
@@ -13474,19 +13490,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,
@@ -13500,26 +13521,29 @@ function WorkflowCreatorProviderBase({
   const discardDraft = useCallback2(() => __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] = useState4({ isVisible: false });
   return /* @__PURE__ */ jsx4(
@@ -16359,7 +16383,7 @@ function CustomTagsField({
   error,
   trim: trim2,
   disabled,
-  wrapperCss: wrapperCss2,
+  wrapperCss: wrapperCss3,
   onChange
 }) {
   const wrapperRef = useRef5(null);
@@ -16367,7 +16391,7 @@ function CustomTagsField({
   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,
@@ -18919,16 +18943,16 @@ import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexica
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 var useSendOneMessage = () => {
   const [editor] = useLexicalComposerContext2();
-  const { sendMessage } = useContext8(OneMessagesContext);
+  const { sendMessage: sendMessage2 } = useContext8(OneMessagesContext);
   const onSend = useCallback8(() => {
     var _a;
     const messageToSend = (_a = editor.getRootElement()) == null ? void 0 : _a.innerText.trim();
     if (!messageToSend) {
       return;
     }
-    sendMessage(messageToSend);
+    sendMessage2(messageToSend);
     editor.dispatchCommand(CLEAR_EDITOR_COMMAND, void 0);
-  }, [editor, sendMessage]);
+  }, [editor, sendMessage2]);
   return onSend;
 };
 
@@ -21411,13 +21435,20 @@ function PublishWorkflowModal({
 }
 
 // src/views/Workflows/Creator/View.tsx
+import { useEffect as useEffect18 } from "react";
 import { Route as Route2, Routes as Routes2 } from "react-router-dom";
+import { useReactFlow as useReactFlow3 } from "reactflow";
 import {
   DesignToken as DesignToken37,
   RadiusToken as RadiusToken18,
   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";
 
@@ -21657,7 +21688,7 @@ function WorkflowDetailsPanel({
             {
               isSelected: tab === "info",
               onClick: () => {
-                navigate(`../info`, { replace: true, relative: "route" });
+                navigate("../info", { replace: true, relative: "route" });
               },
               children: "Info"
             }
@@ -21667,7 +21698,7 @@ function WorkflowDetailsPanel({
             {
               isSelected: tab === "executions",
               onClick: () => {
-                navigate(`../executions`, { replace: true, relative: "route" });
+                navigate("../executions", { replace: true, relative: "route" });
               },
               children: "History"
             }
@@ -22049,7 +22080,7 @@ var Panel_default3 = WorkflowElementPanel;
 // src/views/Workflows/Creator/Navbar.tsx
 import { useEffect as useEffect17, useRef as useRef9, useState as useState27 } from "react";
 import { useNavigate as useNavigate12 } from "react-router-dom";
-import { ArrowBarLeft, ChevronDown as ChevronDown3 } from "@livechat/design-system-icons";
+import { ChevronDown as ChevronDown3, Close as Close6 } from "@livechat/design-system-icons";
 import {
   ActionMenu as ActionMenu2,
   Button as Button28,
@@ -22144,42 +22175,25 @@ function WorkflowCreatorNavbar() {
       borderBottom: true,
       center: true,
       css: css`
-        min-height: 70px;
+        min-height: var(${SpacingToken33.Spacing14});
+        padding-left: var(${SpacingToken33.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(
           Button28,
           {
-            css: css`
-            font-size: var(${SpacingToken33.Spacing4});
-            text-decoration: none;
-          `,
-            kind: "text",
+            icon: /* @__PURE__ */ jsx4(Icon31, { source: Close6 }),
+            kind: "plain",
             onClick: () => {
               navigate("/workflow/list");
-            },
-            children: /* @__PURE__ */ jsxs2(Row16, { center: true, noWrap: true, notPadded: true, children: [
-              /* @__PURE__ */ jsx4(
-                Icon31,
-                {
-                  css: css`
-                min-height: var(${SpacingToken33.Spacing8});
-                min-width: var(${SpacingToken33.Spacing8});
-              `,
-                  size: "large",
-                  source: ArrowBarLeft
-                }
-              ),
-              "Workflows"
-            ] })
+              sendMessage("openSideNav" /* OpenSideNav */);
+            }
           }
         ),
         /* @__PURE__ */ jsxs2(Row16, { center: true, noMaxWidth: true, setRowPadding: "4px 16px", spaceBetween: true, children: [
@@ -22365,6 +22379,22 @@ function WorkflowCreatorView() {
     state: { selection },
     focus
   } = useWorkflowCreator();
+  const { fitView } = useReactFlow3();
+  useEffect18(() => {
+    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: [
@@ -22394,15 +22424,18 @@ var View_default = WorkflowCreatorView;
 // src/views/Workflows/Creator/index.tsx
 function WorkflowCreator() {
   var _a, _b, _c;
-  const location = useLocation6();
+  const location = useLocation5();
   const { id } = useParams4();
   const navigate = useNavigate13();
   const workflowQuery = useFetchWorkflow(id === "new" ? void 0 : id);
+  const credentialsQuery = useFetchIntegrationCredentialsQuery2();
+  const organizationProducts = useFetchOrganizationProducts2();
   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(Loader3, { stretch: true });
   }
   if (id !== "new" && !workflowQuery.isSuccess) {
@@ -22869,6 +22902,7 @@ function WorkflowTemplatesCategoryFilter({
   handleStatus,
   status
 }) {
+  var _a;
   const [isVisible, setIsVisible] = useState28(false);
   const getItem = useCallback15(
     (key, category, icon2) => ({
@@ -22884,25 +22918,26 @@ function WorkflowTemplatesCategoryFilter({
     }),
     [handleStatus]
   );
+  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)
+  ];
+  const selectedKey = (_a = options.find(
+    (option) => option.element.props.children[1] === status
+  )) == null ? void 0 : _a.key;
   return /* @__PURE__ */ jsx4(
     ActionMenu3,
     {
       onClose: () => {
         setIsVisible(false);
       },
-      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)
-      ],
+      options,
       placement: "bottom",
+      selectedOptions: selectedKey ? [selectedKey] : [],
       triggerRenderer: /* @__PURE__ */ jsxs2(
         Button30,
         {
@@ -22945,6 +22980,7 @@ function WorkflowTemplatesProductFilter({
   handleStatus,
   status
 }) {
+  var _a;
   const [isVisible, setIsVisible] = useState29(false);
   const getItem = useCallback16(
     (key, product, icon2) => ({
@@ -22960,23 +22996,28 @@ function WorkflowTemplatesProductFilter({
     }),
     [handleStatus]
   );
+  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),
+  ];
+  const selectedKey = (_a = options.find(
+    (option) => option.element.props.children[1] === status
+  )) == null ? void 0 : _a.key;
   return /* @__PURE__ */ jsx4(
     ActionMenu4,
     {
       onClose: () => {
         setIsVisible(false);
       },
-      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),
-      ],
+      options,
       placement: "bottom",
+      selectedOptions: selectedKey ? [selectedKey] : [],
       triggerRenderer: /* @__PURE__ */ jsxs2(
         Button31,
         {
@@ -23252,11 +23293,11 @@ var Create_default = WorkflowCreate;
 
 // src/views/Workflows/List/View.tsx
 import { useState as useState32 } from "react";
-import { useNavigate as useNavigate19 } from "react-router-dom";
+import { useNavigate as useNavigate20 } from "react-router-dom";
 import {
-  Button as Button34,
-  DesignToken as DesignToken43,
-  SpacingToken as SpacingToken43
+  Button as Button35,
+  DesignToken as DesignToken44,
+  SpacingToken as SpacingToken44
 } from "@livechat/design-system-react-components";
 import { mergeDeep as mergeDeep2 } from "@livechat/developer-studio-api";
 import {
@@ -23267,6 +23308,64 @@ import {
   View as View3
 } from "@livechat/developer-studio-ui-react";
 
+// src/views/Workflows/Creator/LiveChatNavbar.tsx
+import { useCallback as useCallback18 } from "react";
+import { useNavigate as useNavigate18 } from "react-router-dom";
+import { LayoutSidebarLeft } from "@livechat/design-system-icons";
+import {
+  Button as Button32,
+  DesignToken as DesignToken42,
+  Heading as Heading8,
+  Icon as Icon37,
+  SpacingToken as SpacingToken42
+} from "@livechat/design-system-react-components";
+var wrapperCss = (hasData) => css`
+  flex-shrink: 0;
+  height: var(${SpacingToken42.Spacing14});
+  width: 100%;
+  display: flex;
+  padding: 0 var(${SpacingToken42.Spacing6}) 0 var(${SpacingToken42.Spacing4});
+  align-items: center;
+  gap: var(${SpacingToken42.Spacing2});
+  border-bottom: 1px solid var(${DesignToken42.BorderBasicSecondary});
+
+  ${hasData && `> button:last-of-type {
+    margin-left: auto;
+  }`}
+`;
+function LiveChatNavbar() {
+  const navigate = useNavigate18();
+  const workflows = useFetchWorkflows({});
+  const isLoading = workflows.isLoading;
+  const hasNoData = workflows.isSuccess && workflows.data.length === 0;
+  const hasData = !isLoading && !hasNoData;
+  const handleClick = useCallback18(() => {
+    sendMessage("toggleSideNav" /* ToggleSideNav */);
+  }, []);
+  return /* @__PURE__ */ jsxs2("div", { css: wrapperCss(hasData), children: [
+    /* @__PURE__ */ jsx4(
+      Button32,
+      {
+        icon: /* @__PURE__ */ jsx4(Icon37, { source: LayoutSidebarLeft }),
+        kind: "plain",
+        onClick: handleClick
+      }
+    ),
+    /* @__PURE__ */ jsx4(Heading8, { size: "sm", children: "Workflows" }),
+    hasData ? /* @__PURE__ */ jsx4(
+      Button32,
+      {
+        kind: "primary",
+        onClick: () => {
+          navigate("create");
+        },
+        children: "Create workflow"
+      }
+    ) : null
+  ] });
+}
+var LiveChatNavbar_default = LiveChatNavbar;
+
 // src/views/Workflows/List/Grid/Grid.tsx
 import { SearchInput as SearchInput4 } from "@livechat/design-system-react-components";
 import { Grid as Grid2 } from "@livechat/developer-studio-ui-react";
@@ -23276,13 +23375,14 @@ import { useState as useState31 } from "react";
 import { ToggleLeft } from "@livechat/design-system-icons";
 import {
   ActionMenu as ActionMenu5,
-  Button as Button32,
-  Icon as Icon37
+  Button as Button33,
+  Icon as Icon38
 } from "@livechat/design-system-react-components";
 function WorkflowStatusFilter({
   handleStatus,
   status
 }) {
+  var _a;
   const [isVisible, setIsVisible] = useState31(false);
   const items = [
     {
@@ -23310,6 +23410,7 @@ function WorkflowStatusFilter({
       }
     }
   ];
+  const selectedKey = (_a = items.find((item) => item.element === status)) == null ? void 0 : _a.key;
   return /* @__PURE__ */ jsx4(
     ActionMenu5,
     {
@@ -23318,10 +23419,11 @@ function WorkflowStatusFilter({
       },
       options: items,
       placement: "bottom",
+      selectedOptions: selectedKey ? [selectedKey] : [],
       triggerRenderer: /* @__PURE__ */ jsxs2(
-        Button32,
+        Button33,
         {
-          icon: /* @__PURE__ */ jsx4(Icon37, { source: ToggleLeft }),
+          icon: /* @__PURE__ */ jsx4(Icon38, { source: ToggleLeft }),
           kind: "secondary",
           onClick: () => {
             setIsVisible(!isVisible);
@@ -23339,7 +23441,7 @@ function WorkflowStatusFilter({
 var StatusFilter_default = WorkflowStatusFilter;
 
 // src/views/Workflows/List/Grid/Table.tsx
-import { useNavigate as useNavigate18 } from "react-router-dom";
+import { useNavigate as useNavigate19 } from "react-router-dom";
 import {
   Delete as Delete3,
   Info as Info2,
@@ -23349,10 +23451,10 @@ import {
 import {
   ActionMenu as ActionMenu6,
   ActionMenuItem as ActionMenuItem2,
-  Button as Button33,
-  DesignToken as DesignToken42,
-  Icon as Icon38,
-  SpacingToken as SpacingToken42,
+  Button as Button34,
+  DesignToken as DesignToken43,
+  Icon as Icon39,
+  SpacingToken as SpacingToken43,
   Switch as Switch2,
   Tag as Tag3,
   Text as Text21,
@@ -23369,7 +23471,7 @@ import {
 } from "@livechat/developer-studio-ui-react";
 function WorkflowsTable({ workflowsQuery, state }) {
   var _a, _b, _c;
-  const navigate = useNavigate18();
+  const navigate = useNavigate19();
   const notifications = useNotificationContext5();
   const deleteAction = useDeleteWorkflow();
   const activateWorkflowAction = useActivateWorkflow();
@@ -23406,7 +23508,7 @@ function WorkflowsTable({ workflowsQuery, state }) {
                     cursor: pointer;
 
                     &:hover {
-                      background: var(${DesignToken42.SurfacePrimaryHover});
+                      background: var(${DesignToken43.SurfacePrimaryHover});
                     }
                   `,
             onClick: () => {
@@ -23414,7 +23516,7 @@ function WorkflowsTable({ workflowsQuery, state }) {
               navigate(`/workflow/${workflow.id}`);
             },
             children: [
-              /* @__PURE__ */ jsx4("td", { width: "45%", children: /* @__PURE__ */ jsxs2(Row24, { gap: `var(${SpacingToken42.Spacing2})`, noWrap: true, notPadded: true, children: [
+              /* @__PURE__ */ jsx4("td", { width: "45%", children: /* @__PURE__ */ jsxs2(Row24, { gap: `var(${SpacingToken43.Spacing2})`, noWrap: true, notPadded: true, children: [
                 /* @__PURE__ */ jsx4(Text21, { noMargin: true, size: "sm", children: workflow.name }),
                 workflow.related_workflow_id ? /* @__PURE__ */ jsx4(
                   Tag3,
@@ -23469,9 +23571,9 @@ function WorkflowsTable({ workflowsQuery, state }) {
                 }
               ) }),
               /* @__PURE__ */ jsx4("td", { children: !workflow.draft && /* @__PURE__ */ jsx4(
-                Button33,
+                Button34,
                 {
-                  icon: /* @__PURE__ */ jsx4(Icon38, { source: Info2 }),
+                  icon: /* @__PURE__ */ jsx4(Icon39, { source: Info2 }),
                   kind: "plain",
                   onClick: (e) => {
                     e.stopPropagation();
@@ -23488,7 +23590,7 @@ function WorkflowsTable({ workflowsQuery, state }) {
                       element: /* @__PURE__ */ jsx4(
                         ActionMenuItem2,
                         {
-                          leftNode: /* @__PURE__ */ jsx4(Icon38, { source: PlayArrow }),
+                          leftNode: /* @__PURE__ */ jsx4(Icon39, { source: PlayArrow }),
                           children: "Trigger manually"
                         }
                       ),
@@ -23501,7 +23603,7 @@ function WorkflowsTable({ workflowsQuery, state }) {
                       element: /* @__PURE__ */ jsx4(
                         ActionMenuItem2,
                         {
-                          leftNode: /* @__PURE__ */ jsx4(Icon38, { source: Delete3 }),
+                          leftNode: /* @__PURE__ */ jsx4(Icon39, { source: Delete3 }),
                           children: "Delete"
                         }
                       ),
@@ -23517,9 +23619,9 @@ function WorkflowsTable({ workflowsQuery, state }) {
                     }
                   ],
                   triggerRenderer: /* @__PURE__ */ jsx4(
-                    Button33,
+                    Button34,
                     {
-                      icon: /* @__PURE__ */ jsx4(Icon38, { source: MoreHoriz2 }),
+                      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"
@@ -23538,7 +23640,7 @@ function WorkflowsTable({ workflowsQuery, state }) {
       {
         css: css`
               background: transparent !important;
-              color: var(${DesignToken42.ContentBasicSecondary});
+              color: var(${DesignToken43.ContentBasicSecondary});
             `,
         children: /* @__PURE__ */ jsx4("td", { align: "left", colSpan: 6, children: /* @__PURE__ */ jsxs2(Text21, { as: "div", size: "md", children: [
           "There are no",
@@ -23609,11 +23711,11 @@ var Grid_default = WorkflowsGrid;
 
 // src/views/Workflows/List/View.tsx
 var markedStyles = css`
-  color: var(${DesignToken43.ActionPrimaryDefault});
+  color: var(${DesignToken44.ActionPrimaryDefault});
 `;
 function WorkflowListView() {
   var _a;
-  const navigate = useNavigate19();
+  const navigate = useNavigate20();
   const [state, setState] = useState32({
     filters: {
       status: "All",
@@ -23628,6 +23730,7 @@ function WorkflowListView() {
     return /* @__PURE__ */ jsx4(Loader5, { stretch: true });
   }
   return /* @__PURE__ */ jsxs2(View3, { center: hasNoData, noWrap: true, stretch: isLoading, children: [
+    getWorkflowsEnv("isLiveChatMode") ? /* @__PURE__ */ jsx4(Row25, { noMaxWidth: true, notPadded: true, children: /* @__PURE__ */ jsx4(LiveChatNavbar_default, {}) }) : null,
     /* @__PURE__ */ jsxs2(Row25, { topMargin: true, verticalCenter: hasNoData, children: [
       /* @__PURE__ */ jsx4(Column18, { width: hasNoData ? 10 : 8, children: hasNoData ? /* @__PURE__ */ jsx4(Row25, { notPadded: true, children: /* @__PURE__ */ jsx4(
         Intro4,
@@ -23638,7 +23741,7 @@ function WorkflowListView() {
             Row25,
             {
               center: true,
-              gap: `var(${SpacingToken43.Spacing2})`,
+              gap: `var(${SpacingToken44.Spacing2})`,
               notPadded: true,
               verticalCenter: true,
               children: [
@@ -23658,8 +23761,8 @@ function WorkflowListView() {
           header: "Your workflows"
         }
       ) }),
-      hasData ? /* @__PURE__ */ jsx4(Column18, { pullRight: true, children: /* @__PURE__ */ jsx4(
-        Button34,
+      hasData && !getWorkflowsEnv("isHeadless") ? /* @__PURE__ */ jsx4(Column18, { pullRight: true, children: /* @__PURE__ */ jsx4(
+        Button35,
         {
           kind: "primary",
           onClick: () => {
@@ -23669,7 +23772,7 @@ function WorkflowListView() {
         }
       ) }) : null
     ] }),
-    /* @__PURE__ */ jsx4(Row25, { children: /* @__PURE__ */ jsxs2(Column18, { gap: `var(${SpacingToken43.Spacing10})`, noMaxWidth: true, width: 12, children: [
+    /* @__PURE__ */ jsx4(Row25, { children: /* @__PURE__ */ jsxs2(Column18, { gap: `var(${SpacingToken44.Spacing10})`, noMaxWidth: true, width: 12, children: [
       hasData ? /* @__PURE__ */ jsx4(
         Grid_default,
         {
@@ -23702,9 +23805,9 @@ var List_default2 = WorkflowList;
 // src/views/Workflows/index.tsx
 import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function Workflows() {
-  const navigate = useNavigate20();
+  const navigate = useNavigate21();
   const { userHasInstalledWorkflows, isWorkflowAppLoading } = useFetchUserInstalledWorkflows();
-  useEffect18(() => {
+  useEffect19(() => {
     if (isWorkflowAppLoading) {
       return;
     }
@@ -23724,7 +23827,7 @@ function Workflows() {
 var Workflows_default = Workflows;
 
 // src/views/Common/LoginError.tsx
-import { Button as Button35, SpacingToken as SpacingToken44 } 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,
@@ -23736,14 +23839,14 @@ var imgContainerCss2 = css`
   img {
     height: auto;
     max-width: 100%;
-    margin-bottom: var(${SpacingToken44.Spacing10});
+    margin-bottom: var(${SpacingToken45.Spacing10});
   }
 `;
 var paragraphCss = (heading) => css`
     ${heading ? theme.typography.heading.xs : theme.typography.paragraph.s}
-    margin-top: var(${heading ? SpacingToken44.Spacing10 : SpacingToken44.Spacing2});
+    margin-top: var(${heading ? SpacingToken45.Spacing10 : SpacingToken45.Spacing2});
   `;
-var wrapperCss = css`
+var wrapperCss2 = css`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -23757,12 +23860,12 @@ function LoginErrorPage({
   onAuthorize
 }) {
   if (getWorkflowsEnv("isHeadless")) {
-    return /* @__PURE__ */ jsxs2("div", { css: wrapperCss, children: [
+    return /* @__PURE__ */ jsxs2("div", { css: wrapperCss2, children: [
       /* @__PURE__ */ jsx4(Row27, { center: true, noMaxWidth: true, verticalCenter: true, children: /* @__PURE__ */ jsx4(Column19, { center: true, width: 10, children: /* @__PURE__ */ jsx4("div", { css: imgContainerCss2, children: welcomeImage }) }) }),
       /* @__PURE__ */ jsx4(Row27, { center: true, noMaxWidth: true, verticalCenter: true, children: /* @__PURE__ */ jsxs2(Column19, { center: true, width: 10, children: [
         /* @__PURE__ */ jsx4(Intro5, { 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(Button35, { kind: "primary", onClick: onAuthorize, children: "Login with Text" }) })
+        /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(Button36, { kind: "primary", onClick: onAuthorize, children: "Login with Text" }) })
       ] }) })
     ] });
   }