@livechat/platform-workflows 0.0.81 → 0.0.82

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,8 +2302,8 @@ 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
@@ -11923,7 +11923,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 +11985,7 @@ function OneMessagesProvider({ children }) {
         isError,
         groupedEvents: eventsGroup,
         hasAdditionalEvents,
-        sendMessage
+        sendMessage: sendMessage2
       },
       children
     }
@@ -16186,7 +16186,7 @@ function CustomTagsField({
   error,
   trim: trim2,
   disabled,
-  wrapperCss: wrapperCss2,
+  wrapperCss: wrapperCss3,
   onChange
 }) {
   const wrapperRef = (0, import_react33.useRef)(null);
@@ -16194,7 +16194,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 +18651,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 +21097,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");
 
@@ -21774,42 +21781,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 +21985,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: [
@@ -22155,18 +22161,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 +22265,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 +22411,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 +22443,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 +22463,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 +22479,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 +22520,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 +22529,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 +22545,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 +22690,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 +22795,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 +22828,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 +22926,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 +22957,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 +23001,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 +23009,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 +23039,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 +23064,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 +23075,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 +23094,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 +23112,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 +23133,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 +23175,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 +23204,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 +23223,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 +23234,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 +23254,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 +23265,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 +23286,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 +23309,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 +23347,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 +23361,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: