@copart/ops-tool-kit 1.12.11 → 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.11";
+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));
 };
 
 /**
@@ -70311,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),
@@ -70328,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) || {};
@@ -70445,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, {
@@ -70466,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,
@@ -70479,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,