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

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.12-beta.1";
+const version$8 = "1.12.12";
 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$5 = ["breadcrumbs"];
+var _excluded$4 = ["breadcrumbs"];
 var getCrumbProps = function getCrumbProps(props) {
   props.breadcrumbs;
-    var crumbProps = _objectWithoutProperties(props, _excluded$5);
+    var crumbProps = _objectWithoutProperties(props, _excluded$4);
   return crumbProps;
 };
 var Crumb = withBreadcrumbs(_class = /*#__PURE__*/function (_React$Component) {
@@ -23566,7 +23566,7 @@ var RoleSelector$2 = function RoleSelector(_ref) {
   }));
 };
 
-var _excluded$4 = ["selectedYard", "name", "handleChange", "yardOptions", "label"];
+var _excluded$3 = ["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$4);
+    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, {
@@ -24526,14 +24526,14 @@ var HierarchyMenu = function HierarchyMenu(props) {
   });
 };
 
-var _excluded$3 = ["value", "handleChange", "yardOptions", "label", "disabled"];
+var _excluded$2 = ["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$3);
+    otherProps = _objectWithoutProperties(_ref, _excluded$2);
   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$2 = ["count", "current", "showNavButtons", "onLeftButtonClick", "onRightButtonClick", "saveActionComponentState", "ActionComponent", "notificationsTopContainerRef", "mobileNotificationsTopContainerRef", "setNotificationHeightFlag"];
+var _excluded$1 = ["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$2);
+    notification = _objectWithoutProperties(props, _excluded$1);
   var dismissibleFlag = notification.dismissibleFlag,
     onDismiss = notification.onDismiss,
     startsAt = notification.startsAt,
@@ -32728,8 +32728,7 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
     props.setSettingsVisible;
     var handleIconClick = props.handleIconClick,
     ideaNoteVisible = props.ideaNoteVisible,
-    mobileMenuVisible = props.mobileMenuVisible,
-    chatBotVisible = props.chatBotVisible;
+    mobileMenuVisible = props.mobileMenuVisible;
   var coreAppConfig = storage$1.getLocalItem('opsportal-core:config');
   var enableNewToolkitFeatures = coreAppConfig.enableNewToolkitFeatures,
     showSettingsMenuByTileConfig = coreAppConfig.showSettingsMenuByTileConfig,
@@ -33010,23 +33009,6 @@ 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',
@@ -33150,8 +33132,7 @@ var ICONS = {
   IDEANOTE: 'IDEANOTE',
   SETTINGS: 'SETTINGS',
   MIHELP: 'MIHELP',
-  MOBILE_MENU: 'MOBILE_MENU',
-  CHATBOT: 'CHATBOT'
+  MOBILE_MENU: 'MOBILE_MENU'
 };
 var AppBar$1 = function AppBar(props) {
   var _window$toolkitEnv4;
@@ -33225,9 +33206,7 @@ var AppBar$1 = function AppBar(props) {
     setIsNavBarOpen = props.setIsNavBarOpen,
     availableStatuses = props.availableStatuses,
     currentUserStatus = props.currentUserStatus,
-    onUserStatusUpdate = props.onUserStatusUpdate,
-    chatBotVisible = props.chatBotVisible,
-    setChatBotVisible = props.setChatBotVisible;
+    onUserStatusUpdate = props.onUserStatusUpdate;
   var _useWindowSize = useWindowSize(),
     width = _useWindowSize.width;
     _useWindowSize.height;
@@ -33314,16 +33293,6 @@ 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;
@@ -33536,8 +33505,7 @@ var AppBar$1 = function AppBar(props) {
       setSettingsVisible: setSettingsVisible,
       handleIconClick: handleIconClick,
       ideaNoteVisible: ideaNoteVisible,
-      mobileMenuVisible: mobileMenuVisible,
-      chatBotVisible: chatBotVisible
+      mobileMenuVisible: mobileMenuVisible
     })),
     overflowSetStyles: overflowSetStyles,
     overflowIcon: "CollapseMenu",
@@ -36046,10 +36014,7 @@ var AppBar = function AppBar(_ref) {
     ActionComponent = _ref.ActionComponent,
     searchComponent = _ref.searchComponent,
     showNavIconInHeader = _ref.showNavIconInHeader,
-    setIsNavBarOpen = _ref.setIsNavBarOpen,
-    setChatBotVisible = _ref.setChatBotVisible,
-    chatBotVisible = _ref.chatBotVisible,
-    onNotificationsAndHeightChange = _ref.onNotificationsAndHeightChange;
+    setIsNavBarOpen = _ref.setIsNavBarOpen;
   SETTINGS_ITEMS[0].name = storage$1.userName;
 
   // Escape hatch for forceUpdate function
@@ -36646,15 +36611,6 @@ 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;
@@ -36718,9 +36674,7 @@ var AppBar = function AppBar(_ref) {
     setIsNavBarOpen: setIsNavBarOpen,
     availableStatuses: availableStatuses,
     currentUserStatus: currentUserStatus,
-    onUserStatusUpdate: handleUserStatusUpdate,
-    chatBotVisible: chatBotVisible,
-    setChatBotVisible: setChatBotVisible
+    onUserStatusUpdate: handleUserStatusUpdate
   }), latestRelease && /*#__PURE__*/React__default["default"].createElement(LatestReleaseDialog, {
     release: latestRelease,
     handleClose: handleReleaseClose,
@@ -57992,769 +57946,13 @@ var purify$2 = createCommonjsModule(function (module, exports) {
 });
 });
 
-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";
+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";
 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",
@@ -58781,20 +57979,7 @@ 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",
-    "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"
+    "iphoneChrome": "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--iphoneChrome"
   }
 };
 var MiHelpAgent = function MiHelpAgent(_ref) {
@@ -58811,66 +57996,284 @@ 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,
-    _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;
+    mihelpAgentRef = _ref.mihelpAgentRef;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isLoading = _useState2[0],
-    setIsLoading = _useState2[1];
+    showChatWindow = _useState2[0],
+    setShowChatWindow = _useState2[1];
   var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isFeedbackLoading = _useState4[0],
-    setIsFeedbackLoading = _useState4[1];
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    collectionError = _useState6[0];
-    _useState6[1];
+    isFeedbackLoading = _useState6[0],
+    setIsFeedbackLoading = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    collectionError = _useState8[0];
+    _useState8[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 _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    messageError = _useState8[0],
-    setMessageError = _useState8[1];
-  var _useState9 = React.useState([]),
+  var _useState9 = React.useState(false),
     _useState0 = _slicedToArray(_useState9, 2),
-    conversations = _useState0[0],
-    setConversations = _useState0[1];
+    messageError = _useState0[0],
+    setMessageError = _useState0[1];
   var _useState1 = React.useState([]),
     _useState10 = _slicedToArray(_useState1, 2),
-    quickReplyList = _useState10[0],
-    setQuickReplyList = _useState10[1];
-  var _useState11 = React.useState(''),
+    conversations = _useState10[0],
+    setConversations = _useState10[1];
+  var _useState11 = React.useState([]),
     _useState12 = _slicedToArray(_useState11, 2),
-    message = _useState12[0],
-    setMessage = _useState12[1];
-  var _useState13 = React.useState(null),
+    quickReplyList = _useState12[0],
+    setQuickReplyList = _useState12[1];
+  var _useState13 = React.useState(''),
     _useState14 = _slicedToArray(_useState13, 2),
-    currentContext = _useState14[0],
-    setCurrentContext = _useState14[1];
+    message = _useState14[0],
+    setMessage = _useState14[1];
   var _useState15 = React.useState(null),
     _useState16 = _slicedToArray(_useState15, 2),
-    lastSentFromApp = _useState16[0],
-    setLastSentFromApp = _useState16[1];
-  var _useState17 = React.useState({}),
+    currentContext = _useState16[0],
+    setCurrentContext = _useState16[1];
+  var _useState17 = React.useState(null),
     _useState18 = _slicedToArray(_useState17, 2),
-    feedbacks = _useState18[0],
-    setFeedbacks = _useState18[1];
-  var _useState19 = React.useState(null),
+    lastSentFromApp = _useState18[0],
+    setLastSentFromApp = _useState18[1];
+  var _useState19 = React.useState({}),
     _useState20 = _slicedToArray(_useState19, 2),
-    activeFlow = _useState20[0],
-    setActiveFlow = _useState20[1];
-  var flowCompletedRef = React.useRef(false);
-  var previousFlowIdRef = React.useRef(null);
+    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]);
   var saveCurrentContext = function saveCurrentContext(conversationsToBeSaved) {
     var _systemPrompts;
     var systemPrompts = conversationsToBeSaved.filter(function (c) {
@@ -58946,7 +58349,7 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
   }, []);
   var chatBodyRef = React.useRef(null);
   var previousConversationLengthRef = React.useRef(conversations.length);
-  var previousChatBotVisibleRef = React.useRef(chatBotVisible);
+  var previousShowChatWindowRef = React.useRef(showChatWindow);
   var scroll = function scroll() {
     chatBodyRef.current && chatBodyRef.current.scrollTo({
       top: chatBodyRef.current.scrollHeight,
@@ -59092,99 +58495,15 @@ 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: replyText
+      content: reply
     });
     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);
@@ -59192,22 +58511,15 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
   };
   React.useEffect(function () {
     var conversationLengthChanged = previousConversationLengthRef.current !== conversations.length;
-    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);
-      };
+    var chatWindowJustOpened = !previousShowChatWindowRef.current && showChatWindow && conversations.length;
+    if (showChatWindow && conversations.length && (conversationLengthChanged || chatWindowJustOpened)) {
+      scroll();
     }
     previousConversationLengthRef.current = conversations.length;
-    previousChatBotVisibleRef.current = chatBotVisible;
-  }, [conversations.length, chatBotVisible]);
+    previousShowChatWindowRef.current = showChatWindow;
+  }, [conversations, showChatWindow]);
   React.useEffect(function () {
     if (messageError) {
-      console.log('***scrolling 2');
       scroll();
     }
   }, [messageError]);
@@ -59228,29 +58540,11 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
         }
         var replies = _toConsumableArray(quickReplies.slice(0, 3));
         replies.forEach(function (reply, index) {
-          // 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"));
+          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"));
           }
         });
         setQuickReplyList(replies);
@@ -59266,20 +58560,14 @@ 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 _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) {
+    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) {
           case 0:
-            _context3.p = 0;
+            _context2.p = 0;
             setIsFeedbackLoading(true);
             welcomeQuestionRef.current.style.marginLeft = '0px';
             input = messagesContainerRef.current; // Save original styles
@@ -59289,12 +58577,12 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
             input.style.height = input.scrollHeight + 'px';
             input.style.overflow = 'visible';
             input.style.maxHeight = 'none';
-            _context3.n = 1;
+            _context2.n = 1;
             return new Promise(function (res) {
               return setTimeout(res, 100);
             });
           case 1:
-            _context3.n = 2;
+            _context2.n = 2;
             return html2canvas(input, {
               scale: 2,
               useCORS: true,
@@ -59304,7 +58592,7 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
               }
             });
           case 2:
-            canvas = _context3.v;
+            canvas = _context2.v;
             imgData = canvas.toDataURL('image/png');
             pdf = new E$1('p', 'mm', 'a4');
             pdfWidth = pdf.internal.pageSize.getWidth();
@@ -59314,13 +58602,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');
@@ -59331,29 +58619,29 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
             input.style.maxHeight = originalMaxHeight;
             welcomeQuestionRef.current.style.marginLeft = '36px';
             setIsFeedbackLoading(false);
-            _context3.n = 4;
+            _context2.n = 4;
             break;
           case 3:
-            _context3.p = 3;
-            _t2 = _context3.v;
+            _context2.p = 3;
+            _t2 = _context2.v;
             console.log(_t2);
             welcomeQuestionRef.current.style.marginLeft = '36px';
             setIsFeedbackLoading(false);
           case 4:
-            return _context3.a(2);
+            return _context2.a(2);
         }
-      }, _callee3, null, [[0, 3]]);
+      }, _callee2, null, [[0, 3]]);
     }));
     return function handleDownload() {
-      return _ref4.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   var updateFeedback = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee4(feedback, Currentconversation, conversations) {
+    var _ref4 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee3(feedback, Currentconversation, conversations) {
       var _storage$getLocalItem3, _storage$getLocalItem4;
       var payload, feedbackEndpoint, endpoint, newConversations, _t3;
-      return _regenerator().w(function (_context4) {
-        while (1) switch (_context4.p = _context4.n) {
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
           case 0:
             setMessageError(false);
             payload = {
@@ -59361,17 +58649,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) {
-              _context4.n = 1;
+              _context3.n = 1;
               break;
             }
             console.log('MiHelpAgent: feedback endpoint missing from config');
             setMessageError(true);
-            return _context4.a(2);
+            return _context3.a(2);
           case 1:
             endpoint = "".concat(feedbackEndpoint, "/").concat(Currentconversation === null || Currentconversation === void 0 ? void 0 : Currentconversation.feedbackId);
             setIsFeedbackLoading(true);
-            _context4.p = 2;
-            _context4.n = 3;
+            _context3.p = 2;
+            _context3.n = 3;
             return fetcher.put(endpoint, payload, {
               headers: {
                 'Content-Type': 'application/json'
@@ -59385,44 +58673,44 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
             });
             setConversations(newConversations);
             storage$1.setLocalItem('mihelpAgentConversations', newConversations);
-            _context4.n = 5;
+            _context3.n = 5;
             break;
           case 4:
-            _context4.p = 4;
-            _t3 = _context4.v;
+            _context3.p = 4;
+            _t3 = _context3.v;
             console.log('MiHelpAgent: failed to update feedback', _t3);
             setMessageError(true);
           case 5:
-            _context4.p = 5;
+            _context3.p = 5;
             setIsFeedbackLoading(false);
-            return _context4.f(5);
+            return _context3.f(5);
           case 6:
-            return _context4.a(2);
+            return _context3.a(2);
         }
-      }, _callee4, null, [[2, 4, 5, 6]]);
+      }, _callee3, null, [[2, 4, 5, 6]]);
     }));
     return function updateFeedback(_x2, _x3, _x4) {
-      return _ref5.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var handleFeedback = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee5(feedback, Currentconversation, conversations) {
+    var _ref5 = _asyncToGenerator$1(/*#__PURE__*/_regenerator().m(function _callee4(feedback, Currentconversation, conversations) {
       var _storage$getLocalItem5, _storage$getLocalItem6;
       var conversationsUntilCurrentMessage, lastFeedbackIndex, chatHistoryAfterLastFeedback, chatHistoryWithoutSystemPrompts, payload, endpoint, response, newConversations, newFeedbacks, _t4;
-      return _regenerator().w(function (_context5) {
-        while (1) switch (_context5.p = _context5.n) {
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.p = _context4.n) {
           case 0:
             if (!((Currentconversation === null || Currentconversation === void 0 ? void 0 : Currentconversation.feedback) === feedback)) {
-              _context5.n = 1;
+              _context4.n = 1;
               break;
             }
-            return _context5.a(2);
+            return _context4.a(2);
           case 1:
             if (!(Currentconversation !== null && Currentconversation !== void 0 && Currentconversation.feedback)) {
-              _context5.n = 2;
+              _context4.n = 2;
               break;
             }
-            return _context5.a(2, updateFeedback(feedback, Currentconversation, conversations));
+            return _context4.a(2, updateFeedback(feedback, Currentconversation, conversations));
           case 2:
             setMessageError(false);
             conversationsUntilCurrentMessage = _toConsumableArray(conversations).slice(0, conversations.findIndex(function (c) {
@@ -59447,23 +58735,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) {
-              _context5.n = 3;
+              _context4.n = 3;
               break;
             }
             console.log('MiHelpAgent: feedback endpoint missing from config');
             setMessageError(true);
-            return _context5.a(2);
+            return _context4.a(2);
           case 3:
             setIsFeedbackLoading(true);
-            _context5.p = 4;
-            _context5.n = 5;
+            _context4.p = 4;
+            _context4.n = 5;
             return fetcher.post(endpoint, payload, {
               headers: {
                 'Content-Type': 'application/json'
               }
             });
           case 5:
-            response = _context5.v;
+            response = _context4.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), {}, {
@@ -59476,56 +58764,81 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
             setConversations(newConversations);
             storage$1.setLocalItem('mihelpAgentConversations', newConversations);
             storage$1.setLocalItem('mihelpAgentFeedbacks', newFeedbacks);
-            _context5.n = 7;
+            _context4.n = 7;
             break;
           case 6:
-            _context5.p = 6;
-            _t4 = _context5.v;
+            _context4.p = 6;
+            _t4 = _context4.v;
             console.log('MiHelpAgent: failed to submit feedback', _t4);
             setMessageError(true);
           case 7:
-            _context5.p = 7;
+            _context4.p = 7;
             setIsFeedbackLoading(false);
-            return _context5.f(7);
+            return _context4.f(7);
           case 8:
-            return _context5.a(2);
+            return _context4.a(2);
         }
-      }, _callee5, null, [[4, 6, 7, 8]]);
+      }, _callee4, null, [[4, 6, 7, 8]]);
     }));
     return function handleFeedback(_x5, _x6, _x7) {
-      return _ref6.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
-  var chatWindowContent = /*#__PURE__*/React__default["default"].createElement("div", {
+  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", {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindow",
     style: {
-      height: '100%',
-      width: '100%',
-      position: 'relative',
-      left: 0,
-      top: 0
+      left: "".concat(chatPosition.x, "px"),
+      top: "".concat(chatPosition.y, "px"),
+      height: chatWindowHeight
     }
   }, /*#__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"), conversations.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "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",
     style: {
-      display: 'flex',
-      gap: '8px',
-      alignItems: 'center'
+      color: '#fff',
+      fontSize: '20px',
+      cursor: 'pointer'
     }
+  }))), /*#__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,
-    style: {
-      background: 'transparent',
-      border: '1px solid #D1D1D1',
-      padding: '4px 12px'
-    }
+    onClick: handleDownload
   }, /*#__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, {
@@ -59533,23 +58846,14 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
     position: "leftCenter"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--newChatButton",
-    onClick: handleNewConversation,
-    style: {
-      background: 'transparent',
-      border: '1px solid #D1D1D1',
-      padding: '4px 12px'
-    }
+    onClick: handleNewConversation
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
     name: "rotate-right",
     style: {
+      color: '#000',
       fontSize: '16px'
     }
-  }), /*#__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", {
+  }), /*#__PURE__*/React__default["default"].createElement("span", null, "Restart Chat")))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--messagesContainer",
     ref: messagesContainerRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -59571,14 +58875,10 @@ 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 && !activeFlow && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "How can I help you today?")))), !conversations.length && /*#__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"
@@ -59589,7 +58889,7 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
       }
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       "data-chat-id": "quickReply-message-".concat(i + 1)
-    }, replyText))));
+    }, reply))));
   })), function () {
     var userCount = 0;
     var agentCount = 2;
@@ -59646,12 +58946,7 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
         "data-chat-id": testId
       }, conversation === null || conversation === void 0 ? void 0 : conversation.content)));
     });
-  }(), 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", {
+  }(), 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",
@@ -59685,15 +58980,10 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
     className: "utilities_ops-app-frame_MiHelpAgent_MiHelpAgent--chatWindowFooter"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: inputContainerRef,
-    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, {
+    className: _getClassName("inputContainer ".concat(collectionError ? 'disabled' : ''), _styleModuleImportMap$2, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("input", {
-    ref: inputRef,
     type: "text",
     placeholder: "Ask a Question",
     value: message,
@@ -59701,13 +58991,10 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
       return setMessage(e.target.value);
     },
     onKeyUp: handleKeyup,
-    disabled: collectionError || activeFlow !== null
+    disabled: collectionError
   }), /*#__PURE__*/React__default["default"].createElement("span", {
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      if (!activeFlow) {
-        handleReply(message);
-      }
+    onClick: function onClick() {
+      return handleReply(message);
     }
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
     name: "paper-plane-top",
@@ -59715,33 +59002,26 @@ var MiHelpAgent = function MiHelpAgent(_ref) {
     style: {
       color: '#616161',
       fontSize: '20px',
-      cursor: isLoading || collectionError || activeFlow !== null ? 'auto' : 'pointer'
+      cursor: isLoading || collectionError ? 'auto' : 'pointer'
     },
-    disabled: isLoading || collectionError || activeFlow !== null
+    disabled: isLoading || collectionError
   })))), 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"
-  })));
-  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();
-    },
+  }))), /*#__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: {
-      height: "calc(100dvh - ".concat(notificationsCount ? sideBarTopValue : 48, "px)")
-    },
-    className: _getClassName("sidebarPanel ".concat(chatBotVisible ? 'visible' : 'hidden'), _styleModuleImportMap$2, {
-      "handleMissingStyleName": "warn"
-    })
-  }, chatWindowContent));
+      color: '#fff',
+      fontSize: '22px'
+    }
+  })));
+  return ReactDOM__default["default"].createPortal(chatbotUI, document.body);
 };
 
 /**
@@ -71031,9 +70311,9 @@ var AppFrame = function AppFrame(props) {
     chatBotEnabled = _useState4[0],
     setChatBotEnabled = _useState4[1];
   var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2);
-    _useState6[0];
-    var setIsLandscapeInMobile = _useState6[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    isLandscapeInMobile = _useState6[0],
+    setIsLandscapeInMobile = _useState6[1];
   // const [activeSubmenu, setActiveSubmenu] = useState(null)
   var _useState7 = React.useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
@@ -71048,18 +70328,6 @@ 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) || {};
@@ -71177,13 +70445,7 @@ 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,
-    chatBotVisible: chatBotVisible,
-    setChatBotVisible: setChatBotVisible,
-    onNotificationsAndHeightChange: function onNotificationsAndHeightChange(count, height) {
-      setNotificationsCount(count || 0);
-      setSideBarTopValue(height || 0);
-    }
+    setIsNavBarOpen: setIsNavBarOpen
   })), /*#__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, {
@@ -71204,19 +70466,12 @@ 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',
-      flex: 1
+      transition: 'all 0.5s ease-in-out'
     }
-  }, props.children), chatBotEnabled && /*#__PURE__*/React__default["default"].createElement(MiHelpAgent, {
+  }, props.children), chatBotEnabled && !isLandscapeInMobile && /*#__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,
@@ -71224,12 +70479,8 @@ 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,
-    chatBotVisible: chatBotVisible,
-    setChatBotVisible: setChatBotVisible,
-    notificationsCount: notificationsCount,
-    sideBarTopValue: sideBarTopValue
-  }))))))));
+    mihelpAgentRef: props === null || props === void 0 ? void 0 : (_props$mihelpAgentPro8 = props.mihelpAgentProps) === null || _props$mihelpAgentPro8 === void 0 ? void 0 : _props$mihelpAgentPro8.mihelpAgentRef
+  })))))));
 };
 AppFrame.defaultProps = {
   handleScrolling: true,