@copart/ops-tool-kit 1.12.10 → 1.12.12-beta.1

package/dist/ops-tool-kit.js

@@ -47,7 +47,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 const name$r = "@copart/ops-tool-kit";
-const version$8 = "1.12.10";
+const version$8 = "1.12.12-beta.1";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -2855,10 +2855,10 @@ var BreadcrumbsProvider = /*#__PURE__*/function (_React$Component) {
 }(React__namespace.Component);
 
 var _class;
-var _excluded$4 = ["breadcrumbs"];
+var _excluded$5 = ["breadcrumbs"];
 var getCrumbProps = function getCrumbProps(props) {
   props.breadcrumbs;
-    var crumbProps = _objectWithoutProperties(props, _excluded$4);
+    var crumbProps = _objectWithoutProperties(props, _excluded$5);
   return crumbProps;
 };
 var Crumb = withBreadcrumbs(_class = /*#__PURE__*/function (_React$Component) {
@@ -23566,7 +23566,7 @@ var RoleSelector$2 = function RoleSelector(_ref) {
   }));
 };
 
-var _excluded$3 = ["selectedYard", "name", "handleChange", "yardOptions", "label"];
+var _excluded$4 = ["selectedYard", "name", "handleChange", "yardOptions", "label"];
 var getDescription = function getDescription(yardOptions) {
   return function (code) {
     return yardOptions[code].yard_number;
@@ -23582,7 +23582,7 @@ var YardNumberMenu$2 = function YardNumberMenu(_ref) {
     handleChange = _ref.handleChange,
     yardOptions = _ref.yardOptions,
     label = _ref.label,
-    otherProps = _objectWithoutProperties(_ref, _excluded$3);
+    otherProps = _objectWithoutProperties(_ref, _excluded$4);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-1"
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, _extends$1({}, otherProps, {
@@ -24526,14 +24526,14 @@ var HierarchyMenu = function HierarchyMenu(props) {
   });
 };
 
-var _excluded$2 = ["value", "handleChange", "yardOptions", "label", "disabled"];
+var _excluded$3 = ["value", "handleChange", "yardOptions", "label", "disabled"];
 var YardNumberMenu$1 = function YardNumberMenu(_ref) {
   var value = _ref.value,
     handleChange = _ref.handleChange,
     yardOptions = _ref.yardOptions;
     _ref.label;
     var disabled = _ref.disabled,
-    otherProps = _objectWithoutProperties(_ref, _excluded$2);
+    otherProps = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-1"
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, _extends$1({}, otherProps, {
@@ -32160,7 +32160,7 @@ var useWindowSize = function useWindowSize() {
   return windowSize;
 };
 
-var _excluded$1 = ["count", "current", "showNavButtons", "onLeftButtonClick", "onRightButtonClick", "saveActionComponentState", "ActionComponent", "notificationsTopContainerRef", "mobileNotificationsTopContainerRef", "setNotificationHeightFlag"];
+var _excluded$2 = ["count", "current", "showNavButtons", "onLeftButtonClick", "onRightButtonClick", "saveActionComponentState", "ActionComponent", "notificationsTopContainerRef", "mobileNotificationsTopContainerRef", "setNotificationHeightFlag"];
 var alertBackgroundColorMapping = {
   alert: '#fab9b9',
   warning: '#f5f5cb',
@@ -32229,7 +32229,7 @@ var Banner = function Banner(props) {
     notificationsTopContainerRef = props.notificationsTopContainerRef,
     mobileNotificationsTopContainerRef = props.mobileNotificationsTopContainerRef,
     setNotificationHeightFlag = props.setNotificationHeightFlag,
-    notification = _objectWithoutProperties(props, _excluded$1);
+    notification = _objectWithoutProperties(props, _excluded$2);
   var dismissibleFlag = notification.dismissibleFlag,
     onDismiss = notification.onDismiss,
     startsAt = notification.startsAt,
@@ -32728,7 +32728,8 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
     props.setSettingsVisible;
     var handleIconClick = props.handleIconClick,
     ideaNoteVisible = props.ideaNoteVisible,
-    mobileMenuVisible = props.mobileMenuVisible;
+    mobileMenuVisible = props.mobileMenuVisible,
+    chatBotVisible = props.chatBotVisible;
   var coreAppConfig = storage$1.getLocalItem('opsportal-core:config');
   var enableNewToolkitFeatures = coreAppConfig.enableNewToolkitFeatures,
     showSettingsMenuByTileConfig = coreAppConfig.showSettingsMenuByTileConfig,
@@ -33009,6 +33010,23 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
         mobileMenuVisible: mobileMenuVisible
       });
     }
+  }, {
+    key: 'chatBot',
+    name: 'ChatBot',
+    renderIf: true,
+    render: function render() {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items",
+        onClick: function onClick() {
+          return handleIconClick(ICONS.CHATBOT);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+        name: "comment-sparkle-custom",
+        variant: "light"
+      }), chatBotVisible && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer"
+      }));
+    }
   },
   // {
   //   key: 'phoneStatus',
@@ -33132,7 +33150,8 @@ var ICONS = {
   IDEANOTE: 'IDEANOTE',
   SETTINGS: 'SETTINGS',
   MIHELP: 'MIHELP',
-  MOBILE_MENU: 'MOBILE_MENU'
+  MOBILE_MENU: 'MOBILE_MENU',
+  CHATBOT: 'CHATBOT'
 };
 var AppBar$1 = function AppBar(props) {
   var _window$toolkitEnv4;
@@ -33206,7 +33225,9 @@ var AppBar$1 = function AppBar(props) {
     setIsNavBarOpen = props.setIsNavBarOpen,
     availableStatuses = props.availableStatuses,
     currentUserStatus = props.currentUserStatus,
-    onUserStatusUpdate = props.onUserStatusUpdate;
+    onUserStatusUpdate = props.onUserStatusUpdate,
+    chatBotVisible = props.chatBotVisible,
+    setChatBotVisible = props.setChatBotVisible;
   var _useWindowSize = useWindowSize(),
     width = _useWindowSize.width;
     _useWindowSize.height;
@@ -33293,6 +33314,16 @@ var AppBar$1 = function AppBar(props) {
   }, [ideaNoteVisible]);
   var handleIconClick = function handleIconClick(icon) {
     switch (icon) {
+      case ICONS.CHATBOT:
+        setChatBotVisible(function (chatBotVisible) {
+          return !chatBotVisible;
+        });
+        setNotificationsVisible(false);
+        setIdeaNoteVisible(false);
+        setSettingsVisible(false);
+        setMihelpVisible(false);
+        setMobileMenuVisible(false);
+        break;
       case ICONS.SEARCH:
         setShowSearchContainer(function (showSearchContainer) {
           return !showSearchContainer;
@@ -33505,7 +33536,8 @@ var AppBar$1 = function AppBar(props) {
       setSettingsVisible: setSettingsVisible,
       handleIconClick: handleIconClick,
       ideaNoteVisible: ideaNoteVisible,
-      mobileMenuVisible: mobileMenuVisible
+      mobileMenuVisible: mobileMenuVisible,
+      chatBotVisible: chatBotVisible
     })),
     overflowSetStyles: overflowSetStyles,
     overflowIcon: "CollapseMenu",
@@ -36014,7 +36046,10 @@ var AppBar = function AppBar(_ref) {
     ActionComponent = _ref.ActionComponent,
     searchComponent = _ref.searchComponent,
     showNavIconInHeader = _ref.showNavIconInHeader,
-    setIsNavBarOpen = _ref.setIsNavBarOpen;
+    setIsNavBarOpen = _ref.setIsNavBarOpen,
+    setChatBotVisible = _ref.setChatBotVisible,
+    chatBotVisible = _ref.chatBotVisible,
+    onNotificationsAndHeightChange = _ref.onNotificationsAndHeightChange;
   SETTINGS_ITEMS[0].name = storage$1.userName;
 
   // Escape hatch for forceUpdate function
@@ -36611,6 +36646,15 @@ var AppBar = function AppBar(_ref) {
       clearInterval(expireNotificationsInterval);
     };
   }, [notifications]);
+  React.useEffect(function () {
+    if (onNotificationsAndHeightChange) {
+      var _notificationsTopCont, _mobileNotificationsT;
+      // Calculate sideBarTopValue on-the-fly based on notification container heights
+      // Default to 48 (base header height) if refs aren't ready yet
+      var calculatedHeight = notificationsTopContainerRef !== null && notificationsTopContainerRef !== void 0 && (_notificationsTopCont = notificationsTopContainerRef.current) !== null && _notificationsTopCont !== void 0 && _notificationsTopCont.offsetHeight ? notificationsTopContainerRef.current.offsetHeight + 48 : mobileNotificationsTopContainerRef !== null && mobileNotificationsTopContainerRef !== void 0 && (_mobileNotificationsT = mobileNotificationsTopContainerRef.current) !== null && _mobileNotificationsT !== void 0 && _mobileNotificationsT.offsetHeight ? mobileNotificationsTopContainerRef.current.offsetHeight + 48 : 48;
+      onNotificationsAndHeightChange(notifications.length, calculatedHeight);
+    }
+  }, [notifications, notificationHeightFlag, onNotificationsAndHeightChange]);
   var STACK = (_window$toolkitEnv2 = window.toolkitEnv) !== null && _window$toolkitEnv2 !== void 0 && _window$toolkitEnv2.STACK ? window.toolkitEnv.STACK : process.env.STACK;
   STACK = STACK || 'c';
   var modifiedSettings = SETTINGS_ITEMS;
@@ -36674,7 +36718,9 @@ var AppBar = function AppBar(_ref) {
     setIsNavBarOpen: setIsNavBarOpen,
     availableStatuses: availableStatuses,
     currentUserStatus: currentUserStatus,
-    onUserStatusUpdate: handleUserStatusUpdate
+    onUserStatusUpdate: handleUserStatusUpdate,
+    chatBotVisible: chatBotVisible,
+    setChatBotVisible: setChatBotVisible
   }), latestRelease && /*#__PURE__*/React__default["default"].createElement(LatestReleaseDialog, {
     release: latestRelease,
     handleClose: handleReleaseClose,
@@ -57946,13 +57992,769 @@ var purify$2 = createCommonjsModule(function (module, exports) {
 });
 });
 
-var css_248z$3 = ".utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper {\r\n  position: absolute;\r\n  /* right: 50px;\r\n  bottom: 30px; */\r\n  z-index: 9999;\r\n  height: auto;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatIcon {\r\n  position: absolute;\r\n  right: 0;\r\n  bottom: 0px;\r\n  background: #1d5ab9;\r\n  border-radius: 50%;\r\n  width: 60px;\r\n  height: 60px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: 5px solid #fff;\r\n  box-shadow: 0 0px 6px #c1c1c1;\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow {\r\n  position: absolute;\r\n  /* right: 0;\r\n  bottom: 68px; */\r\n  box-shadow: 0 0px 6px #c1c1c1;\r\n  height: 600px;\r\n  width: 500px;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--spinner{\r\n  position: absolute;\r\n  background: rgba(0, 0, 0, 0.5);\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: auto;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowHeader {\r\n  background: #1d5ab9;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  padding: 15px;\r\n  align-items: center;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowHeader .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--title {\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  line-height: 22px;\r\n  color: #fff;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody {\r\n  flex: 1;\r\n  padding: 12px 36px;\r\n  overflow: auto;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatVisible {\r\n  padding-top: 56px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatContainer {\r\n  padding: 8px 0;\r\n  border-bottom: 1px solid #d1d1d1;\r\n  display: flex;\r\n  justify-content: end;\r\n  align-items: center;\r\n  grid-gap: 12px;\r\n  gap: 12px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatVisible .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatContainer {\r\n  position: absolute;\r\n  width: calc(100% - 72px);\r\n  top: 57px;\r\n  background: #fff;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messagesContainer {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 16px;\r\n  gap: 16px;\r\n  cursor: auto;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatContainer .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatButton {\r\n  display: flex;\r\n  align-items: center;\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n  cursor: pointer;\r\n  border: 1px solid #d1d1d1;\r\n  border-radius: 4px;\r\n  padding: 6px 12px;\r\n  font-weight: 600;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--message {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  grid-gap: 10px;\r\n  gap: 10px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--message.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--user {\r\n  justify-content: flex-end;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--message.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--welcomeQuestion {\r\n  margin-top: 5px;\r\n  margin-left: 36px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestions {\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 12px;\r\n  gap: 12px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestions .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestionWrapper {\r\n  display: flex;\r\n  flex-direction: row-reverse;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestions .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestionContainer {\r\n  max-width: 95%;\r\n  word-break: break-all;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestions .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestion {\r\n  border: 1px solid #3261bd;\r\n  border-radius: 16px;\r\n  padding: 6px 8px;\r\n  font-size: 14px;\r\n  color: #3261bd;\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--agentIcon {\r\n  width: 26px;\r\n  border-radius: 50%;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble {\r\n  background-color: #f5f5f5;\r\n  border-radius: 0px 12px 12px 12px;\r\n  padding: 10px 15px;\r\n  max-width: 85%;\r\n  font-size: 14px;\r\n  line-height: 1.5;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--error {\r\n  border: 1px solid #f1bbbc;\r\n  background: #fdf6f6;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--message.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--user .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble {\r\n  background: #3261bd;\r\n  color: #fff;\r\n  border-radius: 12px 0px 12px 12px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--feedbackContainer {\r\n  display: flex;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  margin-top: 10px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--feedbackContainer i {\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble p {\r\n  margin: 0;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble p a {\r\n  color: #1e54ad;\r\n  text-decoration: underline;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble p ol,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble p ul {\r\n  padding-left: 15px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowFooter {\r\n  border-top: 1px solid #d1d1d1;\r\n  padding: 16px 24px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer {\r\n  display: flex;\r\n  align-items: center;\r\n  border: 1px solid #ddd;\r\n  border-radius: 12px;\r\n  padding: 10px 15px;\r\n  cursor: auto;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--disabled {\r\n  background-color: #fafafa;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer input {\r\n  border: none;\r\n  outline: none;\r\n  flex-grow: 1;\r\n  font-size: 14px !important;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer input:disabled::-webkit-input-placeholder {\r\n  color: #757575;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer input:disabled::-moz-placeholder {\r\n  color: #757575;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer input:disabled::-ms-input-placeholder {\r\n  color: #757575;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer input:disabled::placeholder {\r\n  color: #757575;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatbotLoader {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 10px;\r\n  width: 75px;\r\n  background-color: #f5f5f5;\r\n  border-radius: 0px 12px 12px 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatbotLoader .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--dot {\r\n  width: 8px;\r\n  height: 8px;\r\n  margin: 0 3px;\r\n  background-color: #3261bd;\r\n  border-radius: 50%;\r\n  display: inline-block;\r\n  -webkit-animation: utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--bounce 1.2s infinite ease-in-out both;\r\n          animation: utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--bounce 1.2s infinite ease-in-out both;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatbotLoader .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--dot:nth-child(1) {\r\n  -webkit-animation-delay: -0.32s;\r\n          animation-delay: -0.32s;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatbotLoader .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--dot:nth-child(2) {\r\n  -webkit-animation-delay: -0.16s;\r\n          animation-delay: -0.16s;\r\n}\r\n\r\n@-webkit-keyframes utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--bounce {\r\n  0%,\r\n  80%,\r\n  100% {\r\n    -webkit-transform: scale(0);\r\n            transform: scale(0);\r\n  }\r\n  40% {\r\n    -webkit-transform: scale(1);\r\n            transform: scale(1);\r\n  }\r\n}\r\n\r\n@keyframes utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--bounce {\r\n  0%,\r\n  80%,\r\n  100% {\r\n    -webkit-transform: scale(0);\r\n            transform: scale(0);\r\n  }\r\n  40% {\r\n    -webkit-transform: scale(1);\r\n            transform: scale(1);\r\n  }\r\n}\r\n\r\n@media (max-width: 575px) {\r\n  /* .mihelpAgentWrapper {\r\n    right: 20px;\r\n    bottom: 100px;\r\n  } */\r\n  .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--iphoneChrome {\r\n    bottom: 125px;\r\n  }\r\n  .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow {\r\n    width: 450px;\r\n  }\r\n}\r\n\r\n@media (max-width: 475px) {\r\n  .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow {\r\n    width: 400px;\r\n  }\r\n}\r\n\r\n@media (max-width: 425px) {\r\n  .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow {\r\n    width: 350px;\r\n  }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n  .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow {\r\n    width: 325px;\r\n  }\r\n}\r\n\r\n@media (max-width: 350px) {\r\n  .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow {\r\n    width: 300px;\r\n  }\r\n}\r\n\r\n@media (max-width: 325px) {\r\n  .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow {\r\n    width: 275px;\r\n  }\r\n}\r\n";
+var _excluded$1 = ["options"];
+var FLOW_COMPONENTS = {
+  Input: coreComponents.Input,
+  DatePicker: coreComponents.DatePicker,
+  TimeField: coreComponents.TimeField,
+  Select: coreComponents.Select,
+  ChoiceGroup: coreComponents.ChoiceGroup,
+  Checkbox: coreComponents.Checkbox
+};
+var getComponent = function getComponent(name) {
+  return FLOW_COMPONENTS[name] || null;
+};
+var componentAdapters = {
+  Input: function Input(stepData, flowData, handlers) {
+    var _stepData$props;
+    return _objectSpread2({
+      // Only use label from props, not from heading (heading is displayed separately)
+      label: ((_stepData$props = stepData.props) === null || _stepData$props === void 0 ? void 0 : _stepData$props.label) || '',
+      value: flowData[stepData.id] || '',
+      onChange: function onChange(e, value) {
+        var _e$target;
+        var inputValue = (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) != null ? e.target.value : value != null ? value : e;
+        handlers.updateValue(stepData.id, inputValue);
+      },
+      error: handlers.getError(stepData.id)
+    }, stepData.props);
+  },
+  DatePicker: function DatePicker(stepData, flowData, handlers) {
+    var _stepData$validation, _stepData$props2;
+    // Check if this step has been attempted (to conditionally show required validation)
+    // We'll need to pass a function to check this, but for now, don't pass required initially
+    // The validation will be handled by our own error display after attempt
+    var hasRequired = (_stepData$validation = stepData.validation) === null || _stepData$validation === void 0 ? void 0 : _stepData$validation.some(function (r) {
+      return r.type === 'required';
+    });
+    var error = handlers.getError(stepData.id);
+    return _objectSpread2({
+      // Only use label from props, not from heading (heading is displayed separately)
+      label: ((_stepData$props2 = stepData.props) === null || _stepData$props2 === void 0 ? void 0 : _stepData$props2.label) || '',
+      value: flowData[stepData.id] || null,
+      onChange: function onChange(date) {
+        return handlers.updateValue(stepData.id, date);
+      },
+      onError: function onError(error) {
+        return handlers.setError(stepData.id, (error === null || error === void 0 ? void 0 : error.message) || error);
+      },
+      // Only show required validation after user has attempted to submit
+      // Pass required only if there's already an error (meaning it was attempted)
+      required: hasRequired && error ? true : false
+    }, stepData.props);
+  },
+  TimeField: function TimeField(stepData, flowData, handlers) {
+    var _stepData$props3;
+    return _objectSpread2({
+      // Only use label from props, not from heading (heading is displayed separately)
+      label: ((_stepData$props3 = stepData.props) === null || _stepData$props3 === void 0 ? void 0 : _stepData$props3.label) || '',
+      value: flowData[stepData.id] || '',
+      onChange: function onChange(e, value) {
+        var _e$target2;
+        var timeValue = value != null ? value : (e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value) != null ? e.target.value : e;
+        handlers.updateValue(stepData.id, timeValue);
+      },
+      error: handlers.getError(stepData.id)
+    }, stepData.props);
+  },
+  Select: function Select(stepData, flowData, handlers) {
+    var _stepData$props4;
+    // Extract options and other props separately to avoid overriding mapped options
+    var _ref = stepData.props || {},
+      rawOptions = _ref.options,
+      otherProps = _objectWithoutProperties(_ref, _excluded$1);
+    var mappedOptions = (rawOptions || []).map(function (opt) {
+      return {
+        key: String(opt.value),
+        text: opt.label || opt.text || String(opt.value)
+      };
+    });
+    return _objectSpread2({
+      // Only use label from props, not from heading (heading is displayed separately)
+      label: ((_stepData$props4 = stepData.props) === null || _stepData$props4 === void 0 ? void 0 : _stepData$props4.label) || '',
+      selectedOption: flowData[stepData.id] || undefined,
+      options: mappedOptions,
+      onChange: function onChange(e, option) {
+        var _option$data;
+        handlers.updateValue(stepData.id, option === null || option === void 0 ? void 0 : option.key);
+        // Auto-navigate if nextStepId exists in option
+        if (option !== null && option !== void 0 && (_option$data = option.data) !== null && _option$data !== void 0 && _option$data.nextStepId) {
+          handlers.goToStep(option.data.nextStepId);
+        }
+      }
+    }, otherProps);
+  },
+  ChoiceGroup: function ChoiceGroup(stepData, flowData, handlers) {
+    var _stepData$props5, _stepData$props6;
+    return _objectSpread2({
+      // Only use label from props, not from heading (heading is displayed separately)
+      label: ((_stepData$props5 = stepData.props) === null || _stepData$props5 === void 0 ? void 0 : _stepData$props5.label) || '',
+      selected: flowData[stepData.id] || undefined,
+      options: (stepData.options || []).map(function (opt) {
+        return {
+          key: String(opt.value),
+          text: opt.label || String(opt.value)
+        };
+      }),
+      onChange: function onChange(e, option) {
+        var _stepData$options;
+        handlers.updateValue(stepData.id, option === null || option === void 0 ? void 0 : option.key);
+        // Auto-navigate if nextStepId exists in option
+        var originalOption = (_stepData$options = stepData.options) === null || _stepData$options === void 0 ? void 0 : _stepData$options.find(function (o) {
+          return String(o.value) === (option === null || option === void 0 ? void 0 : option.key);
+        });
+        if (originalOption !== null && originalOption !== void 0 && originalOption.nextStepId) {
+          handlers.goToStep(originalOption.nextStepId);
+        }
+      },
+      horizontalLayout: ((_stepData$props6 = stepData.props) === null || _stepData$props6 === void 0 ? void 0 : _stepData$props6.horizontalLayout) || false
+    }, stepData.props);
+  },
+  Checkbox: function Checkbox(stepData, flowData, handlers) {
+    var _stepData$props7;
+    return _objectSpread2({
+      // Only use label from props, not from heading (heading is displayed separately)
+      label: ((_stepData$props7 = stepData.props) === null || _stepData$props7 === void 0 ? void 0 : _stepData$props7.label) || '',
+      checked: Boolean(flowData[stepData.id]),
+      onChange: function onChange(e, checked) {
+        return handlers.updateValue(stepData.id, checked);
+      }
+    }, stepData.props);
+  }
+};
+var getPropAdapter = function getPropAdapter(componentName) {
+  return componentAdapters[componentName] || null;
+};
+var valueFormatters = {
+  DatePicker: function DatePicker(date, stepData) {
+    if (!date) return '';
+    if (date instanceof Date) {
+      return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+      });
+    }
+    return String(date);
+  },
+  TimeField: function TimeField(time) {
+    if (!time) return '';
+    return typeof time === 'string' ? time : String(time);
+  },
+  Select: function Select(key, stepData) {
+    var _stepData$props8, _stepData$props8$opti;
+    if (!key) return '';
+    var option = (_stepData$props8 = stepData.props) === null || _stepData$props8 === void 0 ? void 0 : (_stepData$props8$opti = _stepData$props8.options) === null || _stepData$props8$opti === void 0 ? void 0 : _stepData$props8$opti.find(function (opt) {
+      return String(opt.value) === String(key);
+    });
+    return (option === null || option === void 0 ? void 0 : option.label) || (option === null || option === void 0 ? void 0 : option.text) || String(key);
+  },
+  ChoiceGroup: function ChoiceGroup(key, stepData) {
+    var _stepData$options2;
+    if (!key) return '';
+    var option = (_stepData$options2 = stepData.options) === null || _stepData$options2 === void 0 ? void 0 : _stepData$options2.find(function (opt) {
+      return String(opt.value) === String(key);
+    });
+    return (option === null || option === void 0 ? void 0 : option.label) || String(key);
+  },
+  Input: function Input(value) {
+    return String(value || '');
+  },
+  Checkbox: function Checkbox(value, stepData) {
+    // Handle multiple checkboxes (array) or single checkbox (boolean)
+    if (Array.isArray(value)) {
+      if (stepData !== null && stepData !== void 0 && stepData.checkboxOptions && Array.isArray(stepData.checkboxOptions)) {
+        // Map selected values to their labels
+        return value.map(function (v) {
+          var option = stepData.checkboxOptions.find(function (opt) {
+            return String(opt.value || opt.id) === String(v);
+          });
+          return (option === null || option === void 0 ? void 0 : option.label) || (option === null || option === void 0 ? void 0 : option.text) || String(v);
+        }).join(', ');
+      }
+      return value.join(', ');
+    }
+    return value ? 'yes' : 'no';
+  }
+};
+var getValueFormatter = function getValueFormatter(componentName) {
+  return valueFormatters[componentName] || function (v) {
+    return String(v || '');
+  };
+};
+
+var validateFlowConfig = function validateFlowConfig(flowConfig) {
+  var errors = [];
+  var stepIds = new Set();
+
+  // Validate step IDs are unique
+  flowConfig.steps.forEach(function (step) {
+    if (stepIds.has(step.id)) {
+      errors.push("Duplicate step ID: \"".concat(step.id, "\""));
+    }
+    stepIds.add(step.id);
+  });
+
+  // Validate step references
+  flowConfig.steps.forEach(function (step) {
+    if (step.nextStepId && !stepIds.has(step.nextStepId)) {
+      errors.push("Step \"".concat(step.id, "\" references non-existent step \"").concat(step.nextStepId, "\""));
+    }
+  });
+
+  // Validate component names
+  flowConfig.steps.forEach(function (step) {
+    if (step.component && !getComponent(step.component)) {
+      errors.push("Step \"".concat(step.id, "\" uses unknown component \"").concat(step.component, "\""));
+    }
+  });
+  return errors;
+};
+var isLastStep = function isLastStep(currentStep, steps) {
+  return !currentStep.nextStepId || !steps.find(function (s) {
+    return s.id === currentStep.nextStepId;
+  });
+};
+var validateStep = function validateStep(step, value) {
+  var errors = [];
+  if (!step.validation) return errors;
+  step.validation.forEach(function (rule) {
+    if (rule.type === 'required') {
+      // For single checkbox, required means it must be true
+      // For multiple checkboxes (checkboxOptions), required means at least one must be selected
+      if (step.component === 'Checkbox') {
+        if (step.checkboxOptions && Array.isArray(step.checkboxOptions)) {
+          // Multiple checkboxes - check if array has at least one item
+          if (!Array.isArray(value) || value.length === 0) {
+            errors.push(rule.message || 'Please select at least one option');
+          }
+        } else {
+          // Single checkbox - must be true
+          if (value !== true) {
+            errors.push(rule.message || 'This field is required');
+          }
+        }
+      } else {
+        if (value === null || value === undefined || value === '') {
+          errors.push(rule.message || 'This field is required');
+        }
+      }
+    } else if (rule.type === 'minLength' && typeof value === 'string') {
+      if (value.length < rule.value) {
+        errors.push(rule.message || "Minimum length is ".concat(rule.value));
+      }
+    } else if (rule.type === 'pattern' && rule.value instanceof RegExp) {
+      if (!rule.value.test(String(value))) {
+        errors.push(rule.message || 'Invalid format');
+      }
+    }
+  });
+  return errors;
+};
+var formatAnswer = function formatAnswer(template, flowData, steps) {
+  if (!template) return null;
+  return template.replace(/\$\{([^}]+)\}/g, function (match, stepId) {
+    var step = steps.find(function (s) {
+      return s.id === stepId;
+    });
+    if (!step) return match; // Keep placeholder if step not found
+
+    var value = flowData[stepId];
+    if (value === null || value === undefined) return '';
+    var formatter = getValueFormatter(step.component || 'Input');
+    return formatter(value, step);
+  });
+};
+var useGuidedFlow = function useGuidedFlow(flowConfig) {
+  var _errors$currentStep$i;
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentStepIndex = _useState2[0],
+    setCurrentStepIndex = _useState2[1];
+  var _useState3 = React.useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    flowData = _useState4[0],
+    setFlowData = _useState4[1];
+  var _useState5 = React.useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    errors = _useState6[0],
+    setErrors = _useState6[1];
+  var _useState7 = React.useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    configErrors = _useState8[0],
+    setConfigErrors = _useState8[1];
+  // Track if the last step was explicitly submitted - must be before early return
+  var _useState9 = React.useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    lastStepSubmitted = _useState0[0],
+    setLastStepSubmitted = _useState0[1];
+  // Track which steps have been attempted (to show errors only after attempt)
+  var _useState1 = React.useState(new Set()),
+    _useState10 = _slicedToArray(_useState1, 2),
+    attemptedSteps = _useState10[0],
+    setAttemptedSteps = _useState10[1];
+
+  // Validate config on mount
+  React.useEffect(function () {
+    if (flowConfig) {
+      var validationErrors = validateFlowConfig(flowConfig);
+      setConfigErrors(validationErrors);
+    }
+  }, [flowConfig]);
+  if (!flowConfig || !flowConfig.steps || flowConfig.steps.length === 0) {
+    return {
+      currentStep: null,
+      flowData: {},
+      errors: {},
+      isComplete: false,
+      configErrors: ['Invalid flow configuration'],
+      updateValue: function updateValue() {},
+      setError: function setError() {},
+      getError: function getError() {
+        return undefined;
+      },
+      goToNextStep: function () {
+        var _goToNextStep = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee() {
+          return _regenerator().w(function (_context) {
+            while (1) switch (_context.n) {
+              case 0:
+                return _context.a(2, false);
+            }
+          }, _callee);
+        }));
+        function goToNextStep() {
+          return _goToNextStep.apply(this, arguments);
+        }
+        return goToNextStep;
+      }(),
+      goToStep: function goToStep() {},
+      submitStep: function () {
+        var _submitStep = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee2() {
+          return _regenerator().w(function (_context2) {
+            while (1) switch (_context2.n) {
+              case 0:
+                return _context2.a(2, false);
+            }
+          }, _callee2);
+        }));
+        function submitStep() {
+          return _submitStep.apply(this, arguments);
+        }
+        return submitStep;
+      }(),
+      resetFlow: function resetFlow() {},
+      formatAnswer: function formatAnswer() {
+        return null;
+      },
+      validateFlow: function validateFlow() {
+        return [];
+      }
+    };
+  }
+  var currentStep = flowConfig.steps[currentStepIndex];
+  var isLast = currentStep && isLastStep(currentStep, flowConfig.steps);
+  // Check if current step has a value (handle arrays for multiple checkboxes)
+  var currentValue = currentStep ? flowData[currentStep.id] : null;
+  var hasCurrentValue = currentStep && currentValue !== undefined && currentValue !== null && (Array.isArray(currentValue) ? currentValue.length > 0 : currentValue !== '');
+  var hasCurrentErrors = currentStep && ((_errors$currentStep$i = errors[currentStep.id]) === null || _errors$currentStep$i === void 0 ? void 0 : _errors$currentStep$i.length) > 0;
+  // isComplete should only be true when last step is explicitly submitted, not just when value exists
+  var isComplete = lastStepSubmitted && isLast && hasCurrentValue && !hasCurrentErrors;
+  var updateValue = function updateValue(stepId, value) {
+    setFlowData(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty$2({}, stepId, value));
+    });
+    // Clear error when value changes
+    setErrors(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty$2({}, stepId, []));
+    });
+  };
+  var setError = function setError(stepId, error) {
+    setErrors(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty$2({}, stepId, Array.isArray(error) ? error : [error]));
+    });
+  };
+  var getError = function getError(stepId) {
+    // Only return error if this step has been attempted
+    if (!attemptedSteps.has(stepId)) {
+      return undefined;
+    }
+    var stepErrors = errors[stepId];
+    return stepErrors !== null && stepErrors !== void 0 && stepErrors.length ? stepErrors[0] : undefined;
+  };
+  var goToNextStep = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee3() {
+      var stepErrors, nextIndex;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
+          case 0:
+            if (currentStep) {
+              _context3.n = 1;
+              break;
+            }
+            return _context3.a(2, false);
+          case 1:
+            // Mark this step as attempted
+            setAttemptedSteps(function (prev) {
+              return new Set([].concat(_toConsumableArray(prev), [currentStep.id]));
+            });
+            stepErrors = validateStep(currentStep, flowData[currentStep.id]);
+            if (!(stepErrors.length > 0)) {
+              _context3.n = 2;
+              break;
+            }
+            setError(currentStep.id, stepErrors);
+            return _context3.a(2, false);
+          case 2:
+            if (!isLastStep(currentStep, flowConfig.steps)) {
+              _context3.n = 3;
+              break;
+            }
+            setLastStepSubmitted(true);
+            return _context3.a(2, true);
+          case 3:
+            if (currentStep.nextStepId) {
+              nextIndex = flowConfig.steps.findIndex(function (s) {
+                return s.id === currentStep.nextStepId;
+              });
+              if (nextIndex !== -1) {
+                setCurrentStepIndex(nextIndex);
+              }
+            }
+            return _context3.a(2, true);
+        }
+      }, _callee3);
+    }));
+    return function goToNextStep() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var goToStep = function goToStep(stepId) {
+    var stepIndex = flowConfig.steps.findIndex(function (s) {
+      return s.id === stepId;
+    });
+    if (stepIndex !== -1) {
+      setCurrentStepIndex(stepIndex);
+    }
+  };
+  var submitStep = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee4() {
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.n) {
+          case 0:
+            _context4.n = 1;
+            return goToNextStep();
+          case 1:
+            return _context4.a(2, _context4.v);
+        }
+      }, _callee4);
+    }));
+    return function submitStep() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var resetFlow = function resetFlow() {
+    setCurrentStepIndex(0);
+    setFlowData({});
+    setErrors({});
+    setLastStepSubmitted(false);
+    setAttemptedSteps(new Set());
+  };
+  var formatAnswerString = function formatAnswerString() {
+    return formatAnswer(flowConfig.answer, flowData, flowConfig.steps);
+  };
+  return {
+    currentStep: currentStep,
+    flowData: flowData,
+    errors: errors,
+    isComplete: isComplete,
+    configErrors: configErrors,
+    updateValue: updateValue,
+    setError: setError,
+    getError: getError,
+    goToNextStep: goToNextStep,
+    goToStep: goToStep,
+    submitStep: submitStep,
+    resetFlow: resetFlow,
+    formatAnswer: formatAnswerString,
+    validateFlow: function validateFlow() {
+      return validateFlowConfig(flowConfig);
+    }
+  };
+};
+
+var css_248z$3 = ".utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow {\r\n  box-shadow: 0 0px 6px #c1c1c1;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--spinner {\r\n  position: absolute;\r\n  background: rgba(0, 0, 0, 0.5);\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: auto;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowHeader {\r\n  /* background: #1d5ab9; */\r\n  display: flex;\r\n  justify-content: space-between;\r\n  padding: 15px;\r\n  align-items: center;\r\n  border-bottom: 1px solid #d1d1d1;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowHeader .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--title {\r\n  font-size: 20px;\r\n  font-weight: 700;\r\n  line-height: 24px;\r\n  /* color: #fff; */\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody {\r\n  flex: 1;\r\n  padding: 12px;\r\n  overflow: auto;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatVisible {\r\n  padding-top: 56px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatContainer {\r\n  padding: 8px 0;\r\n  border-bottom: 1px solid #d1d1d1;\r\n  display: flex;\r\n  justify-content: end;\r\n  align-items: center;\r\n  grid-gap: 12px;\r\n  gap: 12px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatVisible .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatContainer {\r\n  position: absolute;\r\n  width: calc(100% - 72px);\r\n  top: 57px;\r\n  background: #fff;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messagesContainer {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 16px;\r\n  gap: 16px;\r\n  cursor: auto;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatContainer .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatButton,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowHeader .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatButton {\r\n  display: flex;\r\n  align-items: center;\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n  cursor: pointer;\r\n  border: 1px solid #d1d1d1;\r\n  border-radius: 4px;\r\n  padding: 6px 12px;\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--message {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  grid-gap: 10px;\r\n  gap: 10px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--message.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--user {\r\n  justify-content: flex-end;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--message.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--welcomeQuestion {\r\n  margin-top: 5px;\r\n  margin-left: 36px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestions {\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 12px;\r\n  gap: 12px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestions .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestionWrapper {\r\n  display: flex;\r\n  flex-direction: row-reverse;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestions .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestionContainer {\r\n  max-width: 95%;\r\n  word-break: break-all;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestions .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestion {\r\n  border: 1px solid #3261bd;\r\n  border-radius: 16px;\r\n  padding: 6px 8px;\r\n  font-size: 14px;\r\n  color: #3261bd;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestions .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestion:hover {\r\n  background-color: #f5f5f5;\r\n  border-color: #3261bd;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--agentIcon {\r\n  width: 26px;\r\n  border-radius: 50%;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble {\r\n  background-color: #f5f5f5;\r\n  border-radius: 0px 12px 12px 12px;\r\n  padding: 10px 15px;\r\n  max-width: 85%;\r\n  font-size: 14px;\r\n  line-height: 1.5;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--error {\r\n  border: 1px solid #f1bbbc;\r\n  background: #fdf6f6;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--message.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--user .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble {\r\n  background: #3261bd;\r\n  color: #fff;\r\n  border-radius: 12px 0px 12px 12px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--feedbackContainer {\r\n  display: flex;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  margin-top: 10px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--feedbackContainer i {\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble p {\r\n  margin: 0;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble p a {\r\n  color: #1e54ad;\r\n  text-decoration: underline;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble p ol,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowBody .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble p ul {\r\n  padding-left: 15px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowFooter {\r\n  border-top: 1px solid #d1d1d1;\r\n  padding: 16px 24px;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer {\r\n  display: flex;\r\n  align-items: center;\r\n  border: 1px solid #616161;\r\n  border-radius: 4px;\r\n  padding: 6px 8px;\r\n  cursor: auto;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--disabled {\r\n  background-color: #fafafa;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer input {\r\n  border: none;\r\n  outline: none;\r\n  flex-grow: 1;\r\n  font-size: 14px !important;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer input:disabled::-webkit-input-placeholder {\r\n  color: #757575;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer input:disabled::-moz-placeholder {\r\n  color: #757575;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer input:disabled::-ms-input-placeholder {\r\n  color: #757575;\r\n}\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--inputContainer input:disabled::placeholder {\r\n  color: #757575;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatbotLoader {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 10px;\r\n  width: 75px;\r\n  background-color: #f5f5f5;\r\n  border-radius: 0px 12px 12px 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatbotLoader .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--dot {\r\n  width: 8px;\r\n  height: 8px;\r\n  margin: 0 3px;\r\n  background-color: #3261bd;\r\n  border-radius: 50%;\r\n  display: inline-block;\r\n  -webkit-animation: utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--bounce 1.2s infinite ease-in-out both;\r\n          animation: utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--bounce 1.2s infinite ease-in-out both;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatbotLoader .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--dot:nth-child(1) {\r\n  -webkit-animation-delay: -0.32s;\r\n          animation-delay: -0.32s;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatbotLoader .utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--dot:nth-child(2) {\r\n  -webkit-animation-delay: -0.16s;\r\n          animation-delay: -0.16s;\r\n}\r\n\r\n@-webkit-keyframes utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--bounce {\r\n  0%,\r\n  80%,\r\n  100% {\r\n    -webkit-transform: scale(0);\r\n            transform: scale(0);\r\n  }\r\n  40% {\r\n    -webkit-transform: scale(1);\r\n            transform: scale(1);\r\n  }\r\n}\r\n\r\n@keyframes utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--bounce {\r\n  0%,\r\n  80%,\r\n  100% {\r\n    -webkit-transform: scale(0);\r\n            transform: scale(0);\r\n  }\r\n  40% {\r\n    -webkit-transform: scale(1);\r\n            transform: scale(1);\r\n  }\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--sidebarWrapper {\r\n  height: 100vh;\r\n  background-color: rgba(0,0,0,.5);\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  transition: max-width 0.25s ease-in-out, width 0.25s ease-in-out, opacity 0.25s ease-in-out;\r\n  overflow: hidden;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--sidebarWrapper.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--visible {\r\n  max-width: 400px;\r\n  width: 400px;\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--sidebarWrapper.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--hidden {\r\n  max-width: 0px;\r\n  width: 0px;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--sidebarPanel {\r\n  width: 400px;\r\n  max-width: 400px;\r\n  height: calc(100vh - 48px);\r\n  background-color: white;\r\n  overflow-y: auto;\r\n  transition: -webkit-transform 0.25s ease-in-out;\r\n  transition: transform 0.25s ease-in-out;\r\n  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--sidebarPanel.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--visible {\r\n  -webkit-transform: translateX(0);\r\n          transform: translateX(0);\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--sidebarPanel.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--hidden {\r\n  -webkit-transform: translateX(100%);\r\n          transform: translateX(100%);\r\n}\r\n\r\n/* Flow Step Styles */\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--flowStepContainer {\r\n  padding: 16px;\r\n  margin: 12px 0;\r\n  background-color: #fff;\r\n  border-radius: 8px;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepHeading {\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  margin: 0 0 12px 0;\r\n  color: #333;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepDescription {\r\n  font-size: 14px;\r\n  color: #666;\r\n  margin: 0 0 16px 0;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--optionsContainer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 12px;\r\n  gap: 12px;\r\n  margin-top: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--optionButton {\r\n  display: flex;\r\n  align-items: center;\r\n  grid-gap: 12px;\r\n  gap: 12px;\r\n  padding: 12px 16px;\r\n  border: 1px solid #d1d1d1;\r\n  border-radius: 8px;\r\n  background-color: #fff;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--optionButton:hover {\r\n  background-color: #f5f5f5;\r\n  border-color: #3261bd;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper {\r\n  margin: 16px 0;\r\n}\r\n\r\n/* Apply border-radius to Input component */\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper input,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper .ms-TextField-fieldGroup,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper .ms-TextField-fieldGroup input {\r\n  border-radius: 8px !important;\r\n}\r\n\r\n/* Apply border-radius to Select component (Dropdown) */\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper .ms-Dropdown-container,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper .ms-Dropdown,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper .ms-Dropdown-title,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper .ms-Dropdown-titleIsPlaceHolder {\r\n  border-radius: 8px !important;\r\n}\r\n\r\n/* Apply border-radius to Button component */\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper button,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper .ms-Button,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper .ms-Button--primary,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper .ms-Button--default {\r\n  border-radius: 4px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--validationError {\r\n  color: #d32f2f;\r\n  font-size: 12px;\r\n  margin-top: 8px;\r\n  padding: 8px;\r\n  background-color: #fdf6f6;\r\n  border: 1px solid #f1bbbc;\r\n  border-radius: 4px;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--renderError {\r\n  color: #d32f2f;\r\n  font-size: 12px;\r\n  margin-top: 8px;\r\n  padding: 8px;\r\n  background-color: #fff3cd;\r\n  border: 1px solid #ffc107;\r\n  border-radius: 4px;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--errorFallback {\r\n  padding: 16px;\r\n  background-color: #fff3cd;\r\n  border: 1px solid #ffc107;\r\n  border-radius: 4px;\r\n  color: #856404;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--errorFallback p {\r\n  margin: 0;\r\n  font-size: 14px;\r\n}\r\n\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepActions {\r\n  margin-top: 16px;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n}\r\n\r\n/* Apply border-radius to Button component in stepActions */\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepActions button,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepActions .ms-Button,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepActions .ms-Button--primary,\r\n.utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepActions .ms-Button--default {\r\n  border-radius: 4px !important;\r\n}\r\n";
 styleInject(css_248z$3);
 
+var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  function ErrorBoundary(props) {
+    var _this;
+    _classCallCheck$3(this, ErrorBoundary);
+    _this = _callSuper(this, ErrorBoundary, [props]);
+    _this.state = {
+      hasError: false,
+      error: null
+    };
+    return _this;
+  }
+  _inherits$2(ErrorBoundary, _React$Component);
+  return _createClass$2(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      if (this.props.onError) {
+        this.props.onError(error, errorInfo);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.hasError) {
+        return this.props.fallback || /*#__PURE__*/React__default["default"].createElement("div", null, "Something went wrong");
+      }
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        hasError: true,
+        error: error
+      };
+    }
+  }]);
+}(React__default["default"].Component);
+var FlowStepRenderer = function FlowStepRenderer(_ref) {
+  var step = _ref.step,
+    flowData = _ref.flowData,
+    handlers = _ref.handlers,
+    isComplete = _ref.isComplete;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    renderError = _useState2[0],
+    setRenderError = _useState2[1];
+  var componentRef = React.useRef(null);
+  if (!step) return null;
+
+  // Question step (options only, no component)
+  if (step.options && !step.component) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--flowStepContainer"
+    }, step.heading && /*#__PURE__*/React__default["default"].createElement("h3", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepHeading"
+    }, step.heading), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--optionsContainer"
+    }, step.options.map(function (option, index) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: index,
+        className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--optionButton",
+        onClick: function onClick() {
+          handlers.updateValue(step.id, option.value);
+          if (option.nextStepId) {
+            handlers.goToStep(option.nextStepId);
+          } else if (step.nextStepId) {
+            handlers.goToStep(step.nextStepId);
+          }
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("span", null, option.label));
+    })));
+  }
+
+  // Multiple checkboxes step (special case)
+  if (step.component === 'Checkbox' && step.checkboxOptions && Array.isArray(step.checkboxOptions)) {
+    var Checkbox = getComponent('Checkbox');
+    var selectedValues = flowData[step.id] || [];
+    var isArray = Array.isArray(selectedValues);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--flowStepContainer"
+    }, step.heading && /*#__PURE__*/React__default["default"].createElement("h3", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepHeading"
+    }, step.heading), step.description && /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepDescription"
+    }, step.description), /*#__PURE__*/React__default["default"].createElement("form", {
+      onSubmit: function onSubmit(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      },
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      },
+      style: {
+        display: 'contents'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper"
+    }, /*#__PURE__*/React__default["default"].createElement(ErrorBoundary, {
+      fallback: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--errorFallback"
+      }, /*#__PURE__*/React__default["default"].createElement("p", null, "Error rendering checkboxes. Please try again.")),
+      onError: function onError(error) {
+        console.error('Checkbox render error:', error);
+        setRenderError(error.message);
+      }
+    }, step.checkboxOptions.map(function (option, index) {
+      var optionValue = option.value || option.id || String(index);
+      var isChecked = isArray ? selectedValues.includes(optionValue) : false;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: index,
+        style: {
+          marginBottom: '12px'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends$1({
+        label: option.label || option.text || String(optionValue),
+        checked: isChecked,
+        onChange: function onChange(e, checked) {
+          var currentValues = isArray ? _toConsumableArray(selectedValues) : [];
+          var newValues;
+          if (checked) {
+            newValues = [].concat(_toConsumableArray(currentValues), [optionValue]);
+          } else {
+            newValues = currentValues.filter(function (v) {
+              return v !== optionValue;
+            });
+          }
+          handlers.updateValue(step.id, newValues);
+        }
+      }, option.props || {})));
+    }))), handlers.getError(step.id) && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--validationError"
+    }, handlers.getError(step.id)), renderError && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--renderError"
+    }, renderError), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepActions"
+    }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Button, {
+      primary: true,
+      type: "button",
+      onClick: (/*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee(e) {
+          return _regenerator().w(function (_context) {
+            while (1) switch (_context.n) {
+              case 0:
+                e.preventDefault();
+                e.stopPropagation();
+                _context.n = 1;
+                return handlers.submitStep();
+              case 1:
+                _context.v;
+              case 2:
+                return _context.a(2);
+            }
+          }, _callee);
+        }));
+        return function (_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }()),
+      disabled: isComplete
+    }, isComplete ? 'Complete' : step.nextStepId ? 'Continue' : 'Submit'))));
+  }
+
+  // Form step (with component)
+  if (step.component) {
+    var Component = getComponent(step.component);
+    if (!Component) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--errorFallback"
+      }, /*#__PURE__*/React__default["default"].createElement("p", null, "Error: Component \"", step.component, "\" not found"));
+    }
+    var adapter = getPropAdapter(step.component);
+    if (!adapter) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--errorFallback"
+      }, /*#__PURE__*/React__default["default"].createElement("p", null, "Error: No adapter found for component \"", step.component, "\""));
+    }
+    var adaptedProps;
+    try {
+      adaptedProps = adapter(step, flowData, handlers);
+    } catch (error) {
+      console.error('Error adapting props:', error);
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--errorFallback"
+      }, /*#__PURE__*/React__default["default"].createElement("p", null, "Error: Failed to prepare component props"));
+    }
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--flowStepContainer"
+    }, step.heading && /*#__PURE__*/React__default["default"].createElement("h3", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepHeading"
+    }, step.heading), step.description && /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepDescription"
+    }, step.description), /*#__PURE__*/React__default["default"].createElement("form", {
+      onSubmit: function onSubmit(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      },
+      onKeyDown: function onKeyDown(e) {
+        // Prevent Enter key from submitting form
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      },
+      style: {
+        display: 'contents'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper"
+    }, /*#__PURE__*/React__default["default"].createElement(ErrorBoundary, {
+      fallback: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--errorFallback"
+      }, /*#__PURE__*/React__default["default"].createElement("p", null, "Error rendering component. Please try again.")),
+      onError: function onError(error) {
+        console.error('Component render error:', error);
+        setRenderError(error.message);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Component, _extends$1({
+      ref: componentRef
+    }, adaptedProps, {
+      "aria-label": step.heading || "Step: ".concat(step.id),
+      onKeyDown: function onKeyDown(e) {
+        // Prevent Enter key from submitting when typing in input
+        if (e.key === 'Enter' && e.target.tagName !== 'BUTTON') {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+    })))), handlers.getError(step.id) && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--validationError"
+    }, handlers.getError(step.id)), renderError && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--renderError"
+    }, renderError), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepActions"
+    }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Button, {
+      primary: true,
+      type: "button",
+      onClick: (/*#__PURE__*/function () {
+        var _ref3 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee2(e) {
+          return _regenerator().w(function (_context2) {
+            while (1) switch (_context2.n) {
+              case 0:
+                e.preventDefault();
+                e.stopPropagation();
+                _context2.n = 1;
+                return handlers.submitStep();
+              case 1:
+                _context2.v;
+                // If this is the last step and validation passed, flow will complete
+              case 2:
+                return _context2.a(2);
+            }
+          }, _callee2);
+        }));
+        return function (_x2) {
+          return _ref3.apply(this, arguments);
+        };
+      }()),
+      disabled: isComplete
+    }, isComplete ? 'Complete' : step.nextStepId ? 'Continue' : 'Submit'))));
+  }
+  return null;
+};
+
 var _styleModuleImportMap$2 = {
   "./MiHelpAgent.css": {
-    "mihelpAgentWrapper": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--mihelpAgentWrapper",
-    "chatIcon": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatIcon",
     "chatWindow": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow",
     "spinner": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--spinner",
     "chatWindowHeader": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowHeader",
@@ -57979,7 +58781,20 @@ var _styleModuleImportMap$2 = {
     "chatbotLoader": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatbotLoader",
     "dot": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--dot",
     "bounce": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--bounce",
-    "iphoneChrome": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--iphoneChrome"
+    "sidebarWrapper": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--sidebarWrapper",
+    "visible": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--visible",
+    "hidden": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--hidden",
+    "sidebarPanel": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--sidebarPanel",
+    "flowStepContainer": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--flowStepContainer",
+    "stepHeading": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepHeading",
+    "stepDescription": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepDescription",
+    "optionsContainer": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--optionsContainer",
+    "optionButton": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--optionButton",
+    "componentWrapper": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--componentWrapper",
+    "validationError": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--validationError",
+    "renderError": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--renderError",
+    "errorFallback": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--errorFallback",
+    "stepActions": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--stepActions"
   }
 };
 var MiHelpAgent = function MiHelpAgent(_ref) {
@@ -57996,284 +58811,66 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
     contextTopMessagesCount = _ref$contextTopMessag === void 0 ? 10 : _ref$contextTopMessag,
     _ref$contextChunks = _ref.contextChunks,
     contextChunks = _ref$contextChunks === void 0 ? 30 : _ref$contextChunks,
-    mihelpAgentRef = _ref.mihelpAgentRef;
+    mihelpAgentRef = _ref.mihelpAgentRef,
+    _ref$chatBotVisible = _ref.chatBotVisible,
+    chatBotVisible = _ref$chatBotVisible === void 0 ? false : _ref$chatBotVisible,
+    setChatBotVisible = _ref.setChatBotVisible,
+    _ref$notificationsCou = _ref.notificationsCount,
+    notificationsCount = _ref$notificationsCou === void 0 ? 0 : _ref$notificationsCou,
+    _ref$sideBarTopValue = _ref.sideBarTopValue,
+    sideBarTopValue = _ref$sideBarTopValue === void 0 ? 0 : _ref$sideBarTopValue;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    showChatWindow = _useState2[0],
-    setShowChatWindow = _useState2[1];
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
   var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isLoading = _useState4[0],
-    setIsLoading = _useState4[1];
+    isFeedbackLoading = _useState4[0],
+    setIsFeedbackLoading = _useState4[1];
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    isFeedbackLoading = _useState6[0],
-    setIsFeedbackLoading = _useState6[1];
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    collectionError = _useState8[0];
-    _useState8[1];
+    collectionError = _useState6[0];
+    _useState6[1];
   var retryCount = React.useRef(0);
   var messagesContainerRef = React.useRef(null);
   var inputContainerRef = React.useRef(null);
+  var inputRef = React.useRef(null);
   var spinnerRef = React.useRef(null);
   var welcomeQuestionRef = React.useRef(null);
-  var _useState9 = React.useState(false),
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    messageError = _useState8[0],
+    setMessageError = _useState8[1];
+  var _useState9 = React.useState([]),
     _useState0 = _slicedToArray(_useState9, 2),
-    messageError = _useState0[0],
-    setMessageError = _useState0[1];
+    conversations = _useState0[0],
+    setConversations = _useState0[1];
   var _useState1 = React.useState([]),
     _useState10 = _slicedToArray(_useState1, 2),
-    conversations = _useState10[0],
-    setConversations = _useState10[1];
-  var _useState11 = React.useState([]),
+    quickReplyList = _useState10[0],
+    setQuickReplyList = _useState10[1];
+  var _useState11 = React.useState(''),
     _useState12 = _slicedToArray(_useState11, 2),
-    quickReplyList = _useState12[0],
-    setQuickReplyList = _useState12[1];
-  var _useState13 = React.useState(''),
+    message = _useState12[0],
+    setMessage = _useState12[1];
+  var _useState13 = React.useState(null),
     _useState14 = _slicedToArray(_useState13, 2),
-    message = _useState14[0],
-    setMessage = _useState14[1];
+    currentContext = _useState14[0],
+    setCurrentContext = _useState14[1];
   var _useState15 = React.useState(null),
     _useState16 = _slicedToArray(_useState15, 2),
-    currentContext = _useState16[0],
-    setCurrentContext = _useState16[1];
-  var _useState17 = React.useState(null),
+    lastSentFromApp = _useState16[0],
+    setLastSentFromApp = _useState16[1];
+  var _useState17 = React.useState({}),
     _useState18 = _slicedToArray(_useState17, 2),
-    lastSentFromApp = _useState18[0],
-    setLastSentFromApp = _useState18[1];
-  var _useState19 = React.useState({}),
+    feedbacks = _useState18[0],
+    setFeedbacks = _useState18[1];
+  var _useState19 = React.useState(null),
     _useState20 = _slicedToArray(_useState19, 2),
-    feedbacks = _useState20[0],
-    setFeedbacks = _useState20[1];
-  var _useState21 = React.useState({
-      x: 0,
-      y: 0
-    }),
-    _useState22 = _slicedToArray(_useState21, 2),
-    position = _useState22[0],
-    setPosition = _useState22[1];
-  var _useState23 = React.useState({
-      x: 50,
-      y: -68
-    }),
-    _useState24 = _slicedToArray(_useState23, 2),
-    chatPosition = _useState24[0],
-    setChatPosition = _useState24[1];
-  var _useState25 = React.useState(false),
-    _useState26 = _slicedToArray(_useState25, 2),
-    isDragging = _useState26[0],
-    setIsDragging = _useState26[1];
-  var _useState27 = React.useState({
-      x: 0,
-      y: 0
-    }),
-    _useState28 = _slicedToArray(_useState27, 2),
-    offset = _useState28[0],
-    setOffset = _useState28[1];
-  var _useState29 = React.useState(false),
-    _useState30 = _slicedToArray(_useState29, 2),
-    dragged = _useState30[0],
-    setDragged = _useState30[1];
-  var _useState31 = React.useState(500),
-    _useState32 = _slicedToArray(_useState31, 2),
-    chatWindowWidth = _useState32[0],
-    setChatWindowWidth = _useState32[1];
-  var _useState33 = React.useState(0),
-    _useState34 = _slicedToArray(_useState33, 2),
-    windowInnerWidthForMobile = _useState34[0],
-    setWindowInnerWidthForMobile = _useState34[1];
-  var _useState35 = React.useState(600),
-    _useState36 = _slicedToArray(_useState35, 2),
-    chatWindowHeight = _useState36[0],
-    setchatWindowHeight = _useState36[1]; //update this if changed in css
-
-  var chatIconSize = 60; //update this if changed in css
-
-  React.useEffect(function () {
-    var updateChatWindowWidth = function updateChatWindowWidth() {
-      var width = window.innerWidth;
-      var newWidth = 500;
-
-      //Update these values if changed in css
-      if (width <= 575) newWidth = 450;
-      if (width <= 475) newWidth = 400;
-      if (width <= 425) newWidth = 350;
-      if (width <= 375) newWidth = 325;
-      if (width <= 350) newWidth = 300;
-      if (width <= 325) newWidth = 275;
-      setChatWindowWidth(newWidth);
-      setWindowInnerWidthForMobile(width);
-    };
-    updateChatWindowWidth();
-    window.addEventListener('resize', updateChatWindowWidth);
-    return function () {
-      return window.removeEventListener('resize', updateChatWindowWidth);
-    };
-  }, []);
-  React.useEffect(function () {
-    var updateInitialPosition = function updateInitialPosition() {
-      var bufferForMobile = window.innerWidth <= 575 ? 40 : 0;
-      setPosition({
-        x: window.innerWidth - chatIconSize + bufferForMobile,
-        y: window.innerHeight - chatIconSize + 30
-      });
-    };
-    updateInitialPosition();
-    window.addEventListener('resize', updateInitialPosition);
-    return function () {
-      return window.removeEventListener('resize', updateInitialPosition);
-    };
-  }, []);
-  var handleStart = function handleStart(e) {
-    var _e$target;
-    var target = e.target;
-    if (inputContainerRef.current && inputContainerRef.current.contains(target) || messagesContainerRef.current && messagesContainerRef.current.contains(target) || spinnerRef.current && spinnerRef.current.contains(target) || e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.closest('#chatCloseIcon')) {
-      return;
-    }
-    e.preventDefault();
-    setIsDragging(true);
-    setDragged(false);
-    var clientX = e.touches ? e.touches[0].clientX : e.clientX;
-    var clientY = e.touches ? e.touches[0].clientY : e.clientY;
-    setOffset({
-      x: clientX - position.x,
-      y: clientY - position.y
-    });
-  };
-  var handleMove = function handleMove(e) {
-    var _e$target2;
-    if (e !== null && e !== void 0 && (_e$target2 = e.target) !== null && _e$target2 !== void 0 && _e$target2.closest('#chatCloseIcon')) return;
-    if (isDragging) {
-      setDragged(true);
-      var clientX = e.touches ? e.touches[0].clientX : e.clientX;
-      var clientY = e.touches ? e.touches[0].clientY : e.clientY;
-      var newX = clientX - offset.x;
-      var newY = clientY - offset.y;
-
-      // chat icon has to stay within set screen bounds
-      newX = Math.max(chatIconSize + 10, Math.min(newX, window.innerWidth - 20));
-      newY = Math.max(chatIconSize + 20, Math.min(newY, window.innerHeight - chatIconSize + 30));
-      setPosition({
-        x: newX,
-        y: newY
-      });
-    }
-  };
-  var handleEnd = function handleEnd() {
-    setIsDragging(false);
-    setTimeout(function () {
-      return setDragged(false);
-    }, 100);
-  };
-  React.useEffect(function () {
-    if (!isDragging) {
-      adjustChatWindowPosition();
-      if (showChatWindow) {
-        adjustChatIconPosition();
-      }
-    }
-  }, [isDragging, position, showChatWindow]);
-  React.useEffect(function () {
-    var isSmallDevice = windowInnerWidthForMobile < 1000;
-    if (showChatWindow && isSmallDevice && !dragged) {
-      adjustChatWindowPosition();
-    }
-  }, [position, dragged]);
-  var adjustChatWindowPosition = function adjustChatWindowPosition() {
-    if (chatWindowHeight + chatIconSize + 20 > window.innerHeight) {
-      return setchatWindowHeight(window.innerHeight - chatIconSize - 20);
-    }
-    // if (chatWindowHeight + chatIconSize + 20 > window.innerHeight) return
-    var bufferForMobile = window.innerWidth <= 575 ? 40 : 0;
-    // let chatX = 0 - chatIconSize + bufferForMobile
-    var chatX = 0 - chatIconSize;
-    var chatY = -chatWindowHeight - chatIconSize - 10; // Default: Open above
-
-    // Adjust horizontally
-    if (position.x + chatWindowWidth > window.innerWidth + bufferForMobile) {
-      chatX = -chatWindowWidth; // Move left if overflowing right
-    }
-
-    // Adjust vertically
-    if (position.y < chatWindowHeight) {
-      chatY = 10; // Move below if there's not enough space above
-    }
-    setChatPosition({
-      x: chatX,
-      y: chatY
-    });
-  };
-  var adjustChatIconPosition = function adjustChatIconPosition() {
-    // if (chatWindowHeight + chatIconSize + 20 > window.innerHeight) {
-    //   return setchatWindowHeight(500)
-    // }
-    var newX = position.x;
-    var newY = position.y;
-    var isSmallDevice = windowInnerWidthForMobile < 1000;
-    var middleX = windowInnerWidthForMobile / 2; // Middle of the screen
-    var closerToLeft = position.x < middleX; // Check if icon is closer to left or right
-
-    // Move chat icon up if chat window is overflowing at the bottom
-    if (position.y < chatWindowHeight && window.innerHeight - position.y < chatWindowHeight) {
-      newY = position.y - (chatWindowHeight - (window.innerHeight - position.y)) - 20;
-    }
-
-    // Move chat icon down if chat window is overflowing at the top
-    else if (position.y > chatWindowHeight && position.y < chatWindowHeight + chatIconSize + 10) {
-      newY = chatWindowHeight + chatIconSize + 20;
-    }
-
-    // In Mobile, move chat icon to the nearest screen edge (left or right)
-    if (isSmallDevice) {
-      newX = closerToLeft ? 70 : windowInnerWidthForMobile - 10;
-    }
-    if (newX !== position.x || newY !== position.y) {
-      setPosition({
-        x: newX,
-        y: newY
-      });
-    }
-  };
-  React.useEffect(function () {
-    if (chatWindowHeight !== 600) {
-      adjustChatWindowPosition();
-      // adjustChatIconPosition()
-    }
-  }, [chatWindowHeight]);
-  React.useEffect(function () {
-    if (isDragging) {
-      document.addEventListener('mousemove', handleMove);
-      document.addEventListener('mouseup', handleEnd);
-      document.addEventListener('touchmove', handleMove, {
-        passive: false
-      });
-      document.addEventListener('touchend', handleEnd);
-    } else {
-      document.removeEventListener('mousemove', handleMove);
-      document.removeEventListener('mouseup', handleEnd);
-      document.removeEventListener('touchmove', handleMove);
-      document.removeEventListener('touchend', handleEnd);
-    }
-    return function () {
-      document.removeEventListener('mousemove', handleMove);
-      document.removeEventListener('mouseup', handleEnd);
-      document.removeEventListener('touchmove', handleMove);
-      document.removeEventListener('touchend', handleEnd);
-    };
-  }, [isDragging]);
-  var handleChatIconClick = function handleChatIconClick() {
-    if (!dragged) {
-      setShowChatWindow(function (prev) {
-        return !prev;
-      });
-    }
-  };
-  React.useEffect(function () {
-    if (showChatWindow) {
-      adjustChatIconPosition();
-    }
-  }, [showChatWindow]);
+    activeFlow = _useState20[0],
+    setActiveFlow = _useState20[1];
+  var flowCompletedRef = React.useRef(false);
+  var previousFlowIdRef = React.useRef(null);
   var saveCurrentContext = function saveCurrentContext(conversationsToBeSaved) {
     var _systemPrompts;
     var systemPrompts = conversationsToBeSaved.filter(function (c) {
@@ -58349,7 +58946,7 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
   }, []);
   var chatBodyRef = React.useRef(null);
   var previousConversationLengthRef = React.useRef(conversations.length);
-  var previousShowChatWindowRef = React.useRef(showChatWindow);
+  var previousChatBotVisibleRef = React.useRef(chatBotVisible);
   var scroll = function scroll() {
     chatBodyRef.current && chatBodyRef.current.scrollTo({
       top: chatBodyRef.current.scrollHeight,
@@ -58495,15 +59092,99 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
   }();
   var handleReply = function handleReply(reply) {
     if (isLoading || collectionError || !reply) return;
+
+    // Check if reply is a flow config object
+    if (_typeof$1(reply) === 'object' && reply !== null && reply.type === 'flow') {
+      setActiveFlow(reply);
+      // Add user message only, don't add agent response - just show the flow directly
+      var _newConversations = _toConsumableArray(conversations);
+      _newConversations.push({
+        role: 'user',
+        content: typeof reply === 'string' ? reply : reply.text || reply.initialMessage || ''
+      });
+      setConversations(_newConversations);
+      setMessage('');
+      return;
+    }
+
+    // Handle plain string or quickReply object
+    var replyText = typeof reply === 'string' ? reply : (reply === null || reply === void 0 ? void 0 : reply.text) || '';
+    if (!replyText) return;
     var newConversations = _toConsumableArray(conversations);
     newConversations.push({
       role: 'user',
-      content: reply
+      content: replyText
     });
     setConversations(newConversations);
     _send(newConversations);
     setMessage('');
   };
+
+  // Use flow hook when flow is active
+  var flowHook = useGuidedFlow(activeFlow);
+
+  // Flow completion handler
+  var handleFlowComplete = React__default["default"].useCallback(/*#__PURE__*/_asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var messageContent, newConversations;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          if (!(!activeFlow || !flowHook.isComplete || flowCompletedRef.current)) {
+            _context2.n = 1;
+            break;
+          }
+          return _context2.a(2);
+        case 1:
+          flowCompletedRef.current = true;
+          if (activeFlow.answer) {
+            // Use template string
+            messageContent = flowHook.formatAnswer() || JSON.stringify(flowHook.flowData);
+          } else {
+            // Use JSON
+            messageContent = JSON.stringify(flowHook.flowData);
+          }
+          newConversations = _toConsumableArray(conversations);
+          newConversations.push({
+            role: 'user',
+            content: messageContent
+          });
+          setConversations(newConversations);
+          _send(newConversations);
+          setActiveFlow(null);
+          flowHook.resetFlow();
+          setMessage('');
+          flowCompletedRef.current = false;
+        case 2:
+          return _context2.a(2);
+      }
+    }, _callee2);
+  })), [activeFlow, flowHook, conversations]);
+
+  // Watch for flow completion
+  React.useEffect(function () {
+    if (activeFlow && flowHook.isComplete && !flowCompletedRef.current) {
+      handleFlowComplete();
+    }
+  }, [flowHook.isComplete, activeFlow, handleFlowComplete]);
+
+  // Reset flow when switching to a different flow (but persist when sidebar closes/reopens)
+  React.useEffect(function () {
+    if (activeFlow) {
+      // If switching to a different flow, reset the previous one
+      if (previousFlowIdRef.current && previousFlowIdRef.current !== activeFlow.id) {
+        flowCompletedRef.current = false;
+        if (flowHook.resetFlow) {
+          flowHook.resetFlow();
+        }
+      }
+      previousFlowIdRef.current = activeFlow.id;
+    } else {
+      // Flow was cleared (e.g., new conversation or completion)
+      previousFlowIdRef.current = null;
+    }
+    // Reset completion flag when flow changes
+    flowCompletedRef.current = false;
+  }, [activeFlow === null || activeFlow === void 0 ? void 0 : activeFlow.id, flowHook]);
   var handleKeyup = function handleKeyup(e) {
     if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13 && !isLoading && !collectionError) {
       handleReply(message);
@@ -58511,15 +59192,22 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
   };
   React.useEffect(function () {
     var conversationLengthChanged = previousConversationLengthRef.current !== conversations.length;
-    var chatWindowJustOpened = !previousShowChatWindowRef.current && showChatWindow && conversations.length;
-    if (showChatWindow && conversations.length && (conversationLengthChanged || chatWindowJustOpened)) {
-      scroll();
+    var sidebarJustOpened = !previousChatBotVisibleRef.current && chatBotVisible;
+    if (conversations.length && (conversationLengthChanged || sidebarJustOpened)) {
+      // Wait for sidebar transition to complete (0.25s) before scrolling
+      var scrollTimeout = setTimeout(function () {
+        scroll();
+      }, 250);
+      return function () {
+        return clearTimeout(scrollTimeout);
+      };
     }
     previousConversationLengthRef.current = conversations.length;
-    previousShowChatWindowRef.current = showChatWindow;
-  }, [conversations, showChatWindow]);
+    previousChatBotVisibleRef.current = chatBotVisible;
+  }, [conversations.length, chatBotVisible]);
   React.useEffect(function () {
     if (messageError) {
+      console.log('***scrolling 2');
       scroll();
     }
   }, [messageError]);
@@ -58540,11 +59228,29 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
         }
         var replies = _toConsumableArray(quickReplies.slice(0, 3));
         replies.forEach(function (reply, index) {
-          if (typeof reply !== 'string') {
-            throw new Error("quickReplies[".concat(index, "] must be a string"));
-          }
-          if (reply.length > 100) {
-            throw new Error("quickReplies[".concat(index, "] exceeds the 100 character limit"));
+          // Support both string and object types
+          if (typeof reply === 'string') {
+            if (reply.length > 100) {
+              throw new Error("quickReplies[".concat(index, "] exceeds the 100 character limit"));
+            }
+          } else if (_typeof$1(reply) === 'object' && reply !== null) {
+            // Validate flow config
+            if (reply.type === 'flow') {
+              if (!reply.id || !reply.steps || !Array.isArray(reply.steps)) {
+                throw new Error("quickReplies[".concat(index, "] flow config is invalid"));
+              }
+            } else if (reply.type === 'quickReply') {
+              if (!reply.text || typeof reply.text !== 'string') {
+                throw new Error("quickReplies[".concat(index, "] quickReply must have text property"));
+              }
+              if (reply.text.length > 100) {
+                throw new Error("quickReplies[".concat(index, "] text exceeds the 100 character limit"));
+              }
+            } else {
+              throw new Error("quickReplies[".concat(index, "] must be a string or have type 'quickReply' or 'flow'"));
+            }
+          } else {
+            throw new Error("quickReplies[".concat(index, "] must be a string or object"));
           }
         });
         setQuickReplyList(replies);
@@ -58560,14 +59266,20 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
     storage$1.setLocalItem('mihelpAgentLastSentApp', '');
     setMessageError(false);
     setCurrentContext(null);
+    // Reset active flow to show quick replies again
+    setActiveFlow(null);
+    flowCompletedRef.current = false;
+    if (flowHook && flowHook.resetFlow) {
+      flowHook.resetFlow();
+    }
   };
   var handleDownload = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var input, originalHeight, originalOverflow, originalMaxHeight, canvas, imgData, pdf, pdfWidth, pdfHeight, padding, imgProps, imgWidth, imgHeight, heightLeft, _position, _t2;
-      return _regenerator().w(function (_context2) {
-        while (1) switch (_context2.p = _context2.n) {
+    var _ref4 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee3() {
+      var input, originalHeight, originalOverflow, originalMaxHeight, canvas, imgData, pdf, pdfWidth, pdfHeight, padding, imgProps, imgWidth, imgHeight, heightLeft, position, _t2;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
           case 0:
-            _context2.p = 0;
+            _context3.p = 0;
             setIsFeedbackLoading(true);
             welcomeQuestionRef.current.style.marginLeft = '0px';
             input = messagesContainerRef.current; // Save original styles
@@ -58577,12 +59289,12 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
             input.style.height = input.scrollHeight + 'px';
             input.style.overflow = 'visible';
             input.style.maxHeight = 'none';
-            _context2.n = 1;
+            _context3.n = 1;
             return new Promise(function (res) {
               return setTimeout(res, 100);
             });
           case 1:
-            _context2.n = 2;
+            _context3.n = 2;
             return html2canvas(input, {
               scale: 2,
               useCORS: true,
@@ -58592,7 +59304,7 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
               }
             });
           case 2:
-            canvas = _context2.v;
+            canvas = _context3.v;
             imgData = canvas.toDataURL('image/png');
             pdf = new E$1('p', 'mm', 'a4');
             pdfWidth = pdf.internal.pageSize.getWidth();
@@ -58602,13 +59314,13 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
             imgWidth = pdfWidth - 2 * padding;
             imgHeight = imgProps.height * imgWidth / imgProps.width;
             heightLeft = imgHeight;
-            _position = 0;
-            pdf.addImage(imgData, 'PNG', padding, _position, imgWidth, imgHeight);
+            position = 0;
+            pdf.addImage(imgData, 'PNG', padding, position, imgWidth, imgHeight);
             heightLeft -= pdfHeight;
             while (heightLeft > 0) {
-              _position = heightLeft - imgHeight;
+              position = heightLeft - imgHeight;
               pdf.addPage();
-              pdf.addImage(imgData, 'PNG', padding, _position, imgWidth, imgHeight);
+              pdf.addImage(imgData, 'PNG', padding, position, imgWidth, imgHeight);
               heightLeft -= pdfHeight;
             }
             pdf.save('Conversation.pdf');
@@ -58619,29 +59331,29 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
             input.style.maxHeight = originalMaxHeight;
             welcomeQuestionRef.current.style.marginLeft = '36px';
             setIsFeedbackLoading(false);
-            _context2.n = 4;
+            _context3.n = 4;
             break;
           case 3:
-            _context2.p = 3;
-            _t2 = _context2.v;
+            _context3.p = 3;
+            _t2 = _context3.v;
             console.log(_t2);
             welcomeQuestionRef.current.style.marginLeft = '36px';
             setIsFeedbackLoading(false);
           case 4:
-            return _context2.a(2);
+            return _context3.a(2);
         }
-      }, _callee2, null, [[0, 3]]);
+      }, _callee3, null, [[0, 3]]);
     }));
     return function handleDownload() {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var updateFeedback = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee3(feedback, Currentconversation, conversations) {
+    var _ref5 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee4(feedback, Currentconversation, conversations) {
       var _storage$getLocalItem3, _storage$getLocalItem4;
       var payload, feedbackEndpoint, endpoint, newConversations, _t3;
-      return _regenerator().w(function (_context3) {
-        while (1) switch (_context3.p = _context3.n) {
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.p = _context4.n) {
           case 0:
             setMessageError(false);
             payload = {
@@ -58649,17 +59361,17 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
             };
             feedbackEndpoint = (_storage$getLocalItem3 = storage$1.getLocalItem('opsportal-core:config')) === null || _storage$getLocalItem3 === void 0 ? void 0 : (_storage$getLocalItem4 = _storage$getLocalItem3.endpoints) === null || _storage$getLocalItem4 === void 0 ? void 0 : _storage$getLocalItem4.mihelpChatFeedback;
             if (feedbackEndpoint) {
-              _context3.n = 1;
+              _context4.n = 1;
               break;
             }
             console.log('MiHelpAgent: feedback endpoint missing from config');
             setMessageError(true);
-            return _context3.a(2);
+            return _context4.a(2);
           case 1:
             endpoint = "".concat(feedbackEndpoint, "/").concat(Currentconversation === null || Currentconversation === void 0 ? void 0 : Currentconversation.feedbackId);
             setIsFeedbackLoading(true);
-            _context3.p = 2;
-            _context3.n = 3;
+            _context4.p = 2;
+            _context4.n = 3;
             return fetcher.put(endpoint, payload, {
               headers: {
                 'Content-Type': 'application/json'
@@ -58673,44 +59385,44 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
             });
             setConversations(newConversations);
             storage$1.setLocalItem('mihelpAgentConversations', newConversations);
-            _context3.n = 5;
+            _context4.n = 5;
             break;
           case 4:
-            _context3.p = 4;
-            _t3 = _context3.v;
+            _context4.p = 4;
+            _t3 = _context4.v;
             console.log('MiHelpAgent: failed to update feedback', _t3);
             setMessageError(true);
           case 5:
-            _context3.p = 5;
+            _context4.p = 5;
             setIsFeedbackLoading(false);
-            return _context3.f(5);
+            return _context4.f(5);
           case 6:
-            return _context3.a(2);
+            return _context4.a(2);
         }
-      }, _callee3, null, [[2, 4, 5, 6]]);
+      }, _callee4, null, [[2, 4, 5, 6]]);
     }));
     return function updateFeedback(_x2, _x3, _x4) {
-      return _ref4.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
   var handleFeedback = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee4(feedback, Currentconversation, conversations) {
+    var _ref6 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee5(feedback, Currentconversation, conversations) {
       var _storage$getLocalItem5, _storage$getLocalItem6;
       var conversationsUntilCurrentMessage, lastFeedbackIndex, chatHistoryAfterLastFeedback, chatHistoryWithoutSystemPrompts, payload, endpoint, response, newConversations, newFeedbacks, _t4;
-      return _regenerator().w(function (_context4) {
-        while (1) switch (_context4.p = _context4.n) {
+      return _regenerator().w(function (_context5) {
+        while (1) switch (_context5.p = _context5.n) {
           case 0:
             if (!((Currentconversation === null || Currentconversation === void 0 ? void 0 : Currentconversation.feedback) === feedback)) {
-              _context4.n = 1;
+              _context5.n = 1;
               break;
             }
-            return _context4.a(2);
+            return _context5.a(2);
           case 1:
             if (!(Currentconversation !== null && Currentconversation !== void 0 && Currentconversation.feedback)) {
-              _context4.n = 2;
+              _context5.n = 2;
               break;
             }
-            return _context4.a(2, updateFeedback(feedback, Currentconversation, conversations));
+            return _context5.a(2, updateFeedback(feedback, Currentconversation, conversations));
           case 2:
             setMessageError(false);
             conversationsUntilCurrentMessage = _toConsumableArray(conversations).slice(0, conversations.findIndex(function (c) {
@@ -58735,23 +59447,23 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
             };
             endpoint = (_storage$getLocalItem5 = storage$1.getLocalItem('opsportal-core:config')) === null || _storage$getLocalItem5 === void 0 ? void 0 : (_storage$getLocalItem6 = _storage$getLocalItem5.endpoints) === null || _storage$getLocalItem6 === void 0 ? void 0 : _storage$getLocalItem6.mihelpChatFeedback;
             if (endpoint) {
-              _context4.n = 3;
+              _context5.n = 3;
               break;
             }
             console.log('MiHelpAgent: feedback endpoint missing from config');
             setMessageError(true);
-            return _context4.a(2);
+            return _context5.a(2);
           case 3:
             setIsFeedbackLoading(true);
-            _context4.p = 4;
-            _context4.n = 5;
+            _context5.p = 4;
+            _context5.n = 5;
             return fetcher.post(endpoint, payload, {
               headers: {
                 'Content-Type': 'application/json'
               }
             });
           case 5:
-            response = _context4.v;
+            response = _context5.v;
             newConversations = conversations.map(function (conversation) {
               var _response$data3;
               return (conversation === null || conversation === void 0 ? void 0 : conversation.id) === (Currentconversation === null || Currentconversation === void 0 ? void 0 : Currentconversation.id) ? _objectSpread2(_objectSpread2({}, conversation), {}, {
@@ -58764,81 +59476,56 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
             setConversations(newConversations);
             storage$1.setLocalItem('mihelpAgentConversations', newConversations);
             storage$1.setLocalItem('mihelpAgentFeedbacks', newFeedbacks);
-            _context4.n = 7;
+            _context5.n = 7;
             break;
           case 6:
-            _context4.p = 6;
-            _t4 = _context4.v;
+            _context5.p = 6;
+            _t4 = _context5.v;
             console.log('MiHelpAgent: failed to submit feedback', _t4);
             setMessageError(true);
           case 7:
-            _context4.p = 7;
+            _context5.p = 7;
             setIsFeedbackLoading(false);
-            return _context4.f(7);
+            return _context5.f(7);
           case 8:
-            return _context4.a(2);
+            return _context5.a(2);
         }
-      }, _callee4, null, [[4, 6, 7, 8]]);
+      }, _callee5, null, [[4, 6, 7, 8]]);
     }));
     return function handleFeedback(_x5, _x6, _x7) {
-      return _ref5.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
-  var isChromeOnIPhone = function isChromeOnIPhone() {
-    var userAgent = navigator.userAgent;
-    var isIPhone = /iPhone/i.test(userAgent);
-    var isChrome = /CriOS/i.test(userAgent);
-    return isIPhone && isChrome;
-  };
-  var chatbotUI = /*#__PURE__*/React__default["default"].createElement("div", {
-    onMouseDown: handleStart,
-    onTouchStart: handleStart,
-    style: {
-      left: "".concat(position.x, "px"),
-      top: "".concat(position.y, "px"),
-      cursor: 'grab'
-    },
-    className: _getClassName("mihelpAgentWrapper ".concat(isChromeOnIPhone() ? 'iphoneChrome' : ''), _styleModuleImportMap$2, {
-      "handleMissingStyleName": "warn"
-    })
-  }, showChatWindow && /*#__PURE__*/React__default["default"].createElement("div", {
+  var chatWindowContent = /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow",
     style: {
-      left: "".concat(chatPosition.x, "px"),
-      top: "".concat(chatPosition.y, "px"),
-      height: chatWindowHeight
+      height: '100%',
+      width: '100%',
+      position: 'relative',
+      left: 0,
+      top: 0
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowHeader"
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--title"
-  }, "MiHelp Bot"), /*#__PURE__*/React__default["default"].createElement("span", {
-    onClick: function onClick() {
-      return setShowChatWindow(false);
-    },
-    id: "chatCloseIcon"
-  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
-    name: "xmark",
-    variant: "light",
+  }, "MiHelp Bot"), conversations.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      color: '#fff',
-      fontSize: '20px',
-      cursor: 'pointer'
+      display: 'flex',
+      gap: '8px',
+      alignItems: 'center'
     }
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: chatBodyRef,
-    className: _getClassName("chatWindowBody ".concat(conversations.length > 0 ? 'newChatVisible' : ''), _styleModuleImportMap$2, {
-      "handleMissingStyleName": "warn"
-    })
-  }, conversations.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatContainer"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatButton",
-    onClick: handleDownload
+    onClick: handleDownload,
+    style: {
+      background: 'transparent',
+      border: '1px solid #D1D1D1',
+      padding: '4px 12px'
+    }
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
     name: "arrow-down-to-line",
     style: {
-      color: '#000',
       fontSize: '16px'
     }
   }), /*#__PURE__*/React__default["default"].createElement("span", null, "Export")), /*#__PURE__*/React__default["default"].createElement(coreComponents.Tooltip, {
@@ -58846,14 +59533,23 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
     position: "leftCenter"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatButton",
-    onClick: handleNewConversation
+    onClick: handleNewConversation,
+    style: {
+      background: 'transparent',
+      border: '1px solid #D1D1D1',
+      padding: '4px 12px'
+    }
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
     name: "rotate-right",
     style: {
-      color: '#000',
       fontSize: '16px'
     }
-  }), /*#__PURE__*/React__default["default"].createElement("span", null, "Restart Chat")))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("span", null, "Restart"))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: chatBodyRef,
+    className: _getClassName("chatWindowBody", _styleModuleImportMap$2, {
+      "handleMissingStyleName": "warn"
+    })
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messagesContainer",
     ref: messagesContainerRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -58875,10 +59571,14 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messageBubble"
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     "data-chat-id": "agent-message-2"
-  }, "How can I help you today?")))), !conversations.length && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "How can I help you today?")))), !conversations.length && !activeFlow && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestions"
   }, quickReplyList.map(function (reply, i) {
+    // Handle both string and object types
+    var replyText = typeof reply === 'string' ? reply : reply.type === 'quickReply' ? reply.text : reply.type === 'flow' ? reply.initialMessage || reply.id : '';
+    var replyKey = _typeof$1(reply) === 'object' && reply.id ? reply.id : i;
     return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: replyKey,
       className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestionWrapper"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--quickQuestionContainer"
@@ -58889,7 +59589,7 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
       }
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       "data-chat-id": "quickReply-message-".concat(i + 1)
-    }, reply))));
+    }, replyText))));
   })), function () {
     var userCount = 0;
     var agentCount = 2;
@@ -58946,7 +59646,12 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
         "data-chat-id": testId
       }, conversation === null || conversation === void 0 ? void 0 : conversation.content)));
     });
-  }(), isLoading && /*#__PURE__*/React__default["default"].createElement("div", {
+  }(), activeFlow && flowHook.currentStep && /*#__PURE__*/React__default["default"].createElement(FlowStepRenderer, {
+    step: flowHook.currentStep,
+    flowData: flowHook.flowData,
+    handlers: flowHook,
+    isComplete: flowHook.isComplete
+  }), isLoading && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--message"
   }, /*#__PURE__*/React__default["default"].createElement("img", {
     src: "/assets/images/mihelpIcons/icon-sparkle.svg",
@@ -58980,10 +59685,15 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowFooter"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: inputContainerRef,
-    className: _getClassName("inputContainer ".concat(collectionError ? 'disabled' : ''), _styleModuleImportMap$2, {
+    onClick: function onClick() {
+      var _inputRef$current;
+      return !activeFlow && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus());
+    },
+    className: _getClassName("inputContainer ".concat(collectionError || activeFlow !== null ? 'disabled' : ''), _styleModuleImportMap$2, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("input", {
+    ref: inputRef,
     type: "text",
     placeholder: "Ask a Question",
     value: message,
@@ -58991,10 +59701,13 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
       return setMessage(e.target.value);
     },
     onKeyUp: handleKeyup,
-    disabled: collectionError
+    disabled: collectionError || activeFlow !== null
   }), /*#__PURE__*/React__default["default"].createElement("span", {
-    onClick: function onClick() {
-      return handleReply(message);
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      if (!activeFlow) {
+        handleReply(message);
+      }
     }
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
     name: "paper-plane-top",
@@ -59002,26 +59715,33 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
     style: {
       color: '#616161',
       fontSize: '20px',
-      cursor: isLoading || collectionError ? 'auto' : 'pointer'
+      cursor: isLoading || collectionError || activeFlow !== null ? 'auto' : 'pointer'
     },
-    disabled: isLoading || collectionError
+    disabled: isLoading || collectionError || activeFlow !== null
   })))), isFeedbackLoading && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--spinner",
     ref: spinnerRef
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Spinner, {
     size: "60px"
-  }))), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatIcon",
-    onClick: handleChatIconClick
-  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
-    name: "comment-sparkle-custom",
-    variant: "light",
-    style: {
-      color: '#fff',
-      fontSize: '22px'
-    }
   })));
-  return ReactDOM__default["default"].createPortal(chatbotUI, document.body);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    onClick: function onClick() {
+      return setChatBotVisible && setChatBotVisible(false);
+    },
+    className: _getClassName("sidebarWrapper ".concat(chatBotVisible ? 'visible' : 'hidden'), _styleModuleImportMap$2, {
+      "handleMissingStyleName": "warn"
+    })
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    style: {
+      height: "calc(100dvh - ".concat(notificationsCount ? sideBarTopValue : 48, "px)")
+    },
+    className: _getClassName("sidebarPanel ".concat(chatBotVisible ? 'visible' : 'hidden'), _styleModuleImportMap$2, {
+      "handleMissingStyleName": "warn"
+    })
+  }, chatWindowContent));
 };
 
 /**
@@ -70296,6 +71016,11 @@ var NO_SCROLL = {};
 var defaultSystemPrompt = 'Format all of the subsequent AI responses in valid HTML5, without markdown code blocks or any additional formatting, ensuring that the response consists only of raw HTML tags. Format your response in this structure:<html> <p> Your answer here </p> </html>';
 var AppFrame = function AppFrame(props) {
   var _props$mihelpAgentPro, _props$mihelpAgentPro2, _props$mihelpAgentPro3, _props$mihelpAgentPro4, _props$mihelpAgentPro5, _props$mihelpAgentPro6, _props$mihelpAgentPro7, _props$mihelpAgentPro8;
+  // Set window.toolkitEnv synchronously so it's available for child components that mount immediately
+  if (props.env) {
+    window.toolkitEnv = props.env;
+  }
+
   // Check if the child AppBar is mounted
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -70306,9 +71031,9 @@ var AppFrame = function AppFrame(props) {
     chatBotEnabled = _useState4[0],
     setChatBotEnabled = _useState4[1];
   var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isLandscapeInMobile = _useState6[0],
-    setIsLandscapeInMobile = _useState6[1];
+    _useState6 = _slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setIsLandscapeInMobile = _useState6[1];
   // const [activeSubmenu, setActiveSubmenu] = useState(null)
   var _useState7 = React.useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
@@ -70323,6 +71048,18 @@ var AppFrame = function AppFrame(props) {
     _useState10 = _slicedToArray(_useState1, 2),
     isNavBarOpen = _useState10[0],
     setIsNavBarOpen = _useState10[1];
+  var _useState11 = React.useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    chatBotVisible = _useState12[0],
+    setChatBotVisible = _useState12[1];
+  var _useState13 = React.useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    notificationsCount = _useState14[0],
+    setNotificationsCount = _useState14[1];
+  var _useState15 = React.useState(0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    sideBarTopValue = _useState16[0],
+    setSideBarTopValue = _useState16[1];
   var setChatBotEnableStatus = function setChatBotEnableStatus() {
     var coreAppConfig = storage$1.getLocalItem('opsportal-core:config');
     var tileData = findAppData(coreAppConfig === null || coreAppConfig === void 0 ? void 0 : coreAppConfig.tiles, coreAppConfig === null || coreAppConfig === void 0 ? void 0 : coreAppConfig.tileOverrides) || {};
@@ -70385,7 +71122,7 @@ var AppFrame = function AppFrame(props) {
       window.toolkitEnv = props.env;
     }
     setChatBotEnableStatus();
-  }, [props]);
+  }, [props.env]);
   var authGuardProps = _objectSpread2(_objectSpread2({}, props), {}, {
     setAppBarMounted: setAppBarMounted
   });
@@ -70440,7 +71177,13 @@ var AppFrame = function AppFrame(props) {
     ActionComponent: props === null || props === void 0 ? void 0 : props.ActionComponent,
     searchComponent: props.searchComponent,
     showNavIconInHeader: props === null || props === void 0 ? void 0 : props.showNavIconInHeader,
-    setIsNavBarOpen: setIsNavBarOpen
+    setIsNavBarOpen: setIsNavBarOpen,
+    chatBotVisible: chatBotVisible,
+    setChatBotVisible: setChatBotVisible,
+    onNotificationsAndHeightChange: function onNotificationsAndHeightChange(count, height) {
+      setNotificationsCount(count || 0);
+      setSideBarTopValue(height || 0);
+    }
   })), /*#__PURE__*/React__default["default"].createElement("main", {
     className: "utilities_ops-app-frame_AppFrame_AppFrame--AppContainer"
   }, props.showNavigation && storage$1.isAuthenticated ? /*#__PURE__*/React__default["default"].createElement(NavigationBar, {
@@ -70461,12 +71204,19 @@ var AppFrame = function AppFrame(props) {
     isNavBarOpen: isNavBarOpen,
     showLevel3Navigation: props.showLevel3Navigation
   }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      height: '100%',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       marginLeft: props.showNavigation && !(props !== null && props !== void 0 && props.showNavIconInHeader) ? navigationWidth : '0px',
       height: '100%',
-      transition: 'all 0.5s ease-in-out'
+      transition: 'all 0.5s ease-in-out',
+      flex: 1
     }
-  }, props.children), chatBotEnabled && !isLandscapeInMobile && /*#__PURE__*/React__default["default"].createElement(MiHelpAgent, {
+  }, props.children), chatBotEnabled && /*#__PURE__*/React__default["default"].createElement(MiHelpAgent, {
     quickReplies: props === null || props === void 0 ? void 0 : (_props$mihelpAgentPro = props.mihelpAgentProps) === null || _props$mihelpAgentPro === void 0 ? void 0 : _props$mihelpAgentPro.quickReplies,
     collection: props === null || props === void 0 ? void 0 : (_props$mihelpAgentPro2 = props.mihelpAgentProps) === null || _props$mihelpAgentPro2 === void 0 ? void 0 : _props$mihelpAgentPro2.collection,
     systemPrompt: (props === null || props === void 0 ? void 0 : (_props$mihelpAgentPro3 = props.mihelpAgentProps) === null || _props$mihelpAgentPro3 === void 0 ? void 0 : _props$mihelpAgentPro3.systemPrompt) || defaultSystemPrompt,
@@ -70474,8 +71224,12 @@ var AppFrame = function AppFrame(props) {
     contextMessagesCount: props === null || props === void 0 ? void 0 : (_props$mihelpAgentPro5 = props.mihelpAgentProps) === null || _props$mihelpAgentPro5 === void 0 ? void 0 : _props$mihelpAgentPro5.contextMessagesCount,
     contextTopMessagesCount: props === null || props === void 0 ? void 0 : (_props$mihelpAgentPro6 = props.mihelpAgentProps) === null || _props$mihelpAgentPro6 === void 0 ? void 0 : _props$mihelpAgentPro6.contextTopMessagesCount,
     contextChunks: props === null || props === void 0 ? void 0 : (_props$mihelpAgentPro7 = props.mihelpAgentProps) === null || _props$mihelpAgentPro7 === void 0 ? void 0 : _props$mihelpAgentPro7.contextChunksCount,
-    mihelpAgentRef: props === null || props === void 0 ? void 0 : (_props$mihelpAgentPro8 = props.mihelpAgentProps) === null || _props$mihelpAgentPro8 === void 0 ? void 0 : _props$mihelpAgentPro8.mihelpAgentRef
-  })))))));
+    mihelpAgentRef: props === null || props === void 0 ? void 0 : (_props$mihelpAgentPro8 = props.mihelpAgentProps) === null || _props$mihelpAgentPro8 === void 0 ? void 0 : _props$mihelpAgentPro8.mihelpAgentRef,
+    chatBotVisible: chatBotVisible,
+    setChatBotVisible: setChatBotVisible,
+    notificationsCount: notificationsCount,
+    sideBarTopValue: sideBarTopValue
+  }))))))));
 };
 AppFrame.defaultProps = {
   handleScrolling: true,