@defra/flood-webchat 0.0.1-beta.26 → 0.0.1-beta.28

package/dist/client.js

@@ -17,6 +17,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lib_classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../lib/classnames */ "./src/client/lib/classnames.js");
 /* harmony import */ var _panel_panel_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../panel/panel.jsx */ "./src/client/components/panel/panel.jsx");
 /* harmony import */ var _store_useApp__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../store/useApp */ "./src/client/store/useApp.js");
+/* harmony import */ var _lib_history_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../lib/history.js */ "./src/client/lib/history.js");
+
 
 
 
@@ -31,8 +33,10 @@ function Availability() {
   } = (0,_store_useApp__WEBPACK_IMPORTED_MODULE_3__.useApp)();
   const [isFixed, setIsFixed] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   const buttonRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
-  const onClick = () => {
+  const onClick = e => {
+    e.preventDefault();
     setChatVisibility(!isChatOpen);
+    (0,_lib_history_js__WEBPACK_IMPORTED_MODULE_4__.historyPushState)();
   };
   const onKeyDown = event => {
     if (event.key === ' ') {
@@ -64,8 +68,8 @@ function Availability() {
     };
   }, [buttonRef, isChatOpen]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-    document.documentElement.classList.toggle('wc-scroll-padding', isFixed);
-    document.body.classList.toggle('wc-scroll-padding', isFixed);
+    document.documentElement.classList.toggle('wc-u-scroll-padding', isFixed);
+    document.body.classList.toggle('wc-u-scroll-padding', isFixed);
   }, [isFixed]);
   let TextComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, "Show Chat");
   if (!threadId) {
@@ -84,9 +88,11 @@ function Availability() {
         draggable: "false",
         onClick: onClick,
         onKeyUp: onKeyUp,
-        onKeyDown: onKeyDown
+        onKeyDown: onKeyDown,
+        role: "button",
+        "data-module": "govuk-button"
       }, TextComponent, unseenCount > 0 && !isChatOpen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
-        className: "wc-open-btn__unseen"
+        className: "wc-availability__unseen"
       }, unseenCount) : null))), isChatOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_jsx__WEBPACK_IMPORTED_MODULE_2__.Panel, null));
     case 'EXISTING':
     case 'UNAVAILABLE':
@@ -138,9 +144,11 @@ function Chat({
     agent,
     agentStatus,
     isAgentTyping,
-    settings
+    settings,
+    isKeyboard
   } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_4__.useApp)();
   const [userMessage, setUserMessage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
+  const [focusVisibleWithin, setFocusVisibleWithin] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   const messageRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
   (0,_hooks_useTextareaAutosize_js__WEBPACK_IMPORTED_MODULE_5__.useTextareaAutosize)(messageRef.current, userMessage);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
@@ -203,26 +211,25 @@ function Chat({
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__.PanelHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-status"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "wc-status__availability govuk-body-s"
+    className: "wc-status__availability"
   }, connectionHeadlineText), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    className: "wc-status__link govuk-!-font-size-16",
+    className: "wc-status__link",
     href: "#",
     "data-module": "govuk-button",
     onClick: onEndChatScreen
   }, "End chat")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "wc-body"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "wc-chat__body"
+    className: "wc-body",
+    tabIndex: "0"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "wc-chat__messages"
+    className: "wc-chat"
   }, messages.length ? messages.map((msg, index) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_message_message_jsx__WEBPACK_IMPORTED_MODULE_3__.Message, {
     key: msg.id,
     message: msg,
     previousMessage: messages[index - 1]
   })) : null, isAgentTyping ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
-    className: "wc-chat__message govuk-body outbound"
+    className: "wc-chat__message outbound"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "wc-chat__from govuk-!-font-size-14"
+    className: "wc-chat__from"
   }, agentName, " is typing"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-chat__text outbound"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
@@ -249,14 +256,12 @@ function Chat({
     cy: "8",
     r: "3",
     fill: "currentColor"
-  })))) : null))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_footer_jsx__WEBPACK_IMPORTED_MODULE_2__.PanelFooter, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "wc-footer__input"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("form", {
-    className: "wc-form",
+  })))) : null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_footer_jsx__WEBPACK_IMPORTED_MODULE_2__.PanelFooter, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("form", {
+    className: `wc-form${focusVisibleWithin ? ' wc-focus-within' : ''}`,
     noValidate: true,
     onSubmit: handleSubmit
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
-    className: "govuk-label wc-form__label govuk-!-font-size-16",
+    className: "govuk-label wc-form__label",
     htmlFor: "wc-form-textarea"
   }, "Your message", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
     className: "govuk-visually-hidden"
@@ -264,18 +269,24 @@ function Chat({
     ref: messageRef,
     rows: "1",
     "aria-required": "true",
-    className: "wc-form__textarea govuk-textarea govuk-!-font-size-16",
+    className: "wc-form__textarea",
     id: "wc-form-textarea",
     name: "message",
     onChange: onChange,
     onKeyDown: handleKeyPress,
+    onFocus: () => {
+      setFocusVisibleWithin(isKeyboard);
+    },
+    onBlur: () => {
+      setFocusVisibleWithin(false);
+    },
     value: userMessage
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
     type: "submit",
-    className: "wc-form__button govuk-button govuk-!-font-size-16",
+    className: "wc-form__button govuk-button",
     value: "Send",
     "data-prevent-double-click": "true"
-  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-footer__settings"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "#",
@@ -328,11 +339,11 @@ const ErrorSummary = ({
     role: "alert"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", {
     id: "wc-error",
-    className: "govuk-error-summary__title"
+    className: "wc-error-summary__title govuk-error-summary__title"
   }, "There is a problem"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "govuk-error-summary__body"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "govuk-list govuk-error-summary__list"
+    className: "govuk-list govuk-error-summary__list wc-error-summary__list"
   }, errs.map(key => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
     key: key
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
@@ -366,13 +377,13 @@ function Message({
   const outbound = message.direction === 'outbound';
   const messageOwnerSameAsPrevious = message?.direction === previousMessage?.direction;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
-    className: (0,_lib_classnames__WEBPACK_IMPORTED_MODULE_1__.classnames)('wc-chat__message govuk-body', outbound ? 'outbound' : 'inbound')
+    className: (0,_lib_classnames__WEBPACK_IMPORTED_MODULE_1__.classnames)('wc-chat__message', outbound ? 'outbound' : 'inbound')
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "wc-chat__from govuk-!-font-size-14"
+    className: "wc-chat__from"
   }, messageOwnerSameAsPrevious ? null : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, outbound ? message.assignee : 'You'), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
     className: "govuk-visually-hidden"
-  }, ":")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: (0,_lib_classnames__WEBPACK_IMPORTED_MODULE_1__.classnames)('wc-chat__text', 'govuk-body-s', outbound ? 'outbound' : 'inbound')
+  }, ":")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: (0,_lib_classnames__WEBPACK_IMPORTED_MODULE_1__.classnames)('wc-chat__text', outbound ? 'outbound' : 'inbound')
   }, message.text));
 }
 
@@ -414,24 +425,42 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
+/* harmony import */ var _lib_history_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../lib/history.js */ "./src/client/lib/history.js");
+
 
 
 function PanelHeader() {
   const {
     thread,
+    threadId,
     setChatVisibility,
     setUnseenCount,
-    threadId
+    isMobile
   } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_1__.useApp)();
   const onClose = e => {
     e.preventDefault();
     setChatVisibility(false);
+    (0,_lib_history_js__WEBPACK_IMPORTED_MODULE_2__.historyReplaceState)();
     if (threadId) {
       thread?.lastMessageSeen();
       setUnseenCount(0);
     }
   };
-  let ButtonComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+  const BackButtonComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    className: "wc-header__back",
+    "aria-label": "Close the webchat",
+    onClick: onClose
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
+    d: "M4.828,11L12.314,18.485L10.899,19.899L1,10L10.899,0.101L12.314,1.515L4.828,9L19,9L19,11L4.828,11Z",
+    fill: "currentColor"
+  })));
+  const CloseButtonComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     className: "wc-header__close",
     "aria-label": "Close the webchat",
     onClick: onClose
@@ -445,28 +474,39 @@ function PanelHeader() {
     d: "M10,8.6L15.6,3L17,4.4L11.4,10L17,15.6L15.6,17L10,11.4L4.4,17L3,15.6L8.6,10L3,4.4L4.4,3L10,8.6Z",
     fill: "currentColor"
   })));
+  const MinimiseButtonComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    className: "wc-header__hide",
+    "aria-label": "Minimise the webchat",
+    onClick: onClose
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
+    d: "M10 14.4l-7-7L4.4 6l5.6 5.6L15.6 6 17 7.4l-7 7z",
+    fill: "currentColor"
+  })));
+  let RightButtonComponent = CloseButtonComponent;
   if (thread) {
-    ButtonComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-      className: "wc-header__hide",
-      "aria-label": "Minimise the webchat",
-      onClick: onClose
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
-      "aria-hidden": "true",
-      focusable: "false",
-      width: "20",
-      height: "20",
-      viewBox: "0 0 20 20"
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
-      d: "M10 14.4l-7-7L4.4 6l5.6 5.6L15.6 6 17 7.4l-7 7z",
-      fill: "currentColor"
-    })));
+    RightButtonComponent = MinimiseButtonComponent;
+    if (isMobile && !window.history.state) {
+      RightButtonComponent = MinimiseButtonComponent;
+    }
+  }
+  if (!thread && isMobile && !window.history.state) {
+    RightButtonComponent = CloseButtonComponent;
+  }
+  if (isMobile && window.history.state) {
+    RightButtonComponent = null;
   }
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-header"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", {
+  }, window.history.state ? BackButtonComponent : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", {
     id: "wc-header-title",
-    className: "wc-header__title govuk-heading-s"
-  }, "Floodline Webchat"), ButtonComponent);
+    className: "wc-header__title"
+  }, "Floodline Webchat"), RightButtonComponent);
 }
 
 /***/ }),
@@ -495,6 +535,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
 /* harmony import */ var _store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../store/useChatSdk.js */ "./src/client/store/useChatSdk.js");
 /* harmony import */ var _hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../hooks/useFocusedElements.js */ "./src/client/hooks/useFocusedElements.js");
+/* harmony import */ var _lib_history_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../lib/history.js */ "./src/client/lib/history.js");
+
 
 
 
@@ -517,7 +559,8 @@ function Panel() {
     setThreadId,
     setChatVisibility,
     setMessages,
-    setUnseenCount
+    setUnseenCount,
+    isMobile
   } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_9__.useApp)();
   const {
     fetchThread,
@@ -532,16 +575,30 @@ function Panel() {
         setUnseenCount(0);
       }
       setChatVisibility(false);
+      (0,_lib_history_js__WEBPACK_IMPORTED_MODULE_12__.historyReplaceState)();
     }
   }, [thread, threadId, setUnseenCount, setChatVisibility]);
 
+  /**
+  * We need ammend classes on the body element to handle mobile behaviour
+  */
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    document.body.classList.remove('wc-u-hidden');
+    document.getElementsByTagName('html')[0].classList.add('wc-u-html');
+    document.body.classList.add('wc-u-body');
+    return () => {
+      document.getElementsByTagName('html')[0].classList.remove('wc-u-html');
+      document.body.classList.remove('wc-u-body');
+    };
+  }, [isMobile]);
+
   /**
    * Initializes the eventListener for pressing the escape key
    */
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-    const escapeKeyEvent = document.addEventListener('keydown', onEscapeKey);
+    document.addEventListener('keydown', onEscapeKey);
     return () => {
-      document.removeEventListener('keydown', escapeKeyEvent);
+      document.removeEventListener('keydown', onEscapeKey);
     };
   }, [onEscapeKey, setChatVisibility]);
 
@@ -631,7 +688,9 @@ function Panel() {
     tabIndex: "-1",
     "aria-modal": "true",
     "aria-labelledby": "wc-header-title"
-  }, ScreenComponent);
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-panel__inner"
+  }, ScreenComponent));
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(Component, document.body));
 }
 
@@ -682,22 +741,26 @@ function EndChat({
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__.PanelHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-body"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-content"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
-    className: "govuk-heading-s",
+    className: "wc-heading",
     "aria-live": "polite"
   }, "Are you sure you want to end the chat?"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "govuk-button-group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "#endChat",
-    className: "govuk-button govuk-!-font-size-16",
+    role: "button",
+    className: "wc-button govuk-button",
     "data-module": "govuk-button",
     id: "confirmEndChat",
     onClick: confirmEndChat
   }, "Yes, end chat"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "#resumeChat",
-    className: "govuk-link govuk-!-font-size-16",
+    role: "button",
+    className: "wc-link govuk-link",
     onClick: onChatScreen
-  }, "No, resume chat"))));
+  }, "No, resume chat")))));
 }
 
 /***/ }),
@@ -725,23 +788,24 @@ function Feedback({
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__.PanelHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-body"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-content"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     id: "wc-subtitle",
-    className: "govuk-heading-s"
-  }, "Give Feedback on Floodline webchat"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "Please note we\u2019re unable to respond to feedback."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    className: "wc-heading"
+  }, "Give Feedback on Floodline webchat"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "Please note we\u2019re unable to respond to feedback."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     className: "govuk-link",
     href: "#",
     target: "_blank",
     rel: "noreferrer"
-  }, "Feedback Link"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "govuk-button-group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Feedback Link")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     id: "feedback-cancel",
+    className: "wc-link govuk-link",
     href: "#",
     "data-module": "govuk-button",
     role: "button",
     onClick: feedbackCancel
-  }, "Close"))));
+  }, "Close")))));
 }
 
 /***/ }),
@@ -766,18 +830,14 @@ function PreChat({
 }) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__.PanelHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-body"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-content"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
-    className: "govuk-heading-s",
+    className: "wc-heading",
     "aria-live": "polite"
-  }, "What you can use webchat for"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "govuk-body-s"
-  }, "Webchat lets you talk directly to a Floodline adviser."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "govuk-body-s"
-  }, "You can use webchat to get:"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "govuk-list govuk-list--bullet govuk-body-s"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, "current flood warnings and alerts in your area"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, "information on the flood warning service"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, "advice on what to do before, during and after a flood")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "govuk-body-s"
-  }, "There are other ways to\xA0", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "What you can use webchat for"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "Webchat lets you talk directly to a Floodline adviser."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "You can use webchat to get:"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    className: "wc-list"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, "current flood warnings and alerts in your area"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, "information on the flood warning service"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, "advice on what to do before, during and after a flood")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "There are other ways to\xA0", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     className: "govuk-link",
     href: "https://www.gov.uk/sign-up-for-flood-warnings",
     target: "_blank",
@@ -787,29 +847,23 @@ function PreChat({
     href: "https://www.fws.environment-agency.gov.uk/app/olr/login",
     target: "_blank",
     rel: "noreferrer"
-  }, "manage your flood warnings account"), "."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "govuk-body-s"
-  }, "Do not use webchat to\xA0", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "manage your flood warnings account"), "."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "Do not use webchat to\xA0", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     className: "govuk-link",
     href: "https://www.gov.uk/report-flood-cause",
     target: "_blank",
     rel: "noreferrer"
   }, "report a flood"), "."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-    className: "govuk-button govuk-!-font-size-16",
+    className: "govuk-button wc-button govuk-!-margin-top-1",
     "data-module": "govuk-button",
     onClick: onContinue
   }, "Continue"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
-    className: "govuk-heading-s"
-  }, "Other flood information"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "govuk-body-s"
-  }, "Call Floodline for all other flood and flood warning information."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "govuk-body-s"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("strong", null, "Floodline helpline"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), "Telephone: 0345 988 1188", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), "Textphone: 0345 602 6340", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), "Open 24 hours a day, 7 days a week", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    className: "wc-heading"
+  }, "Other flood information"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "Call Floodline for all other flood and flood warning information."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("strong", null, "Floodline helpline"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), "Telephone: 0345 988 1188", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), "Textphone: 0345 602 6340", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), "Open 24 hours a day, 7 days a week", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     className: "govuk-link",
     href: "https://gov.uk/call-charges",
     target: "_blank",
     rel: "noreferrer"
-  }, "Find out more about call charges"))));
+  }, "Find out more about call charges")))));
 }
 
 /***/ }),
@@ -907,6 +961,8 @@ function RequestChat({
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_3__.PanelHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-body"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-content"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "#",
     className: "wc-back-link govuk-back-link",
@@ -914,12 +970,12 @@ function RequestChat({
   }, "What you can use webchat for"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_errorSummary_error_summary_jsx__WEBPACK_IMPORTED_MODULE_6__.ErrorSummary, {
     errors: errors
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
-    className: "govuk-heading-s",
+    className: "wc-heading",
     "aria-live": "polite"
   }, "Your name and question"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("form", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: (0,_lib_classnames_js__WEBPACK_IMPORTED_MODULE_2__.classnames)('govuk-form-group', errors.name && 'govuk-form-group--error')
+    className: (0,_lib_classnames_js__WEBPACK_IMPORTED_MODULE_2__.classnames)('wc-form-group', 'govuk-form-group', errors.name && 'govuk-form-group--error')
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
-    className: "govuk-label",
+    className: "wc-label govuk-label",
     htmlFor: "wc-name"
   }, "Your name"), errors.name && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "govuk-error-message"
@@ -927,19 +983,19 @@ function RequestChat({
     className: "govuk-visually-hidden"
   }, "Error:"), " ", errors.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
     ref: nameRef,
-    className: (0,_lib_classnames_js__WEBPACK_IMPORTED_MODULE_2__.classnames)('govuk-input', errors.name && 'govuk-input--error'),
+    className: (0,_lib_classnames_js__WEBPACK_IMPORTED_MODULE_2__.classnames)('wc-input', 'govuk-input', errors.name && 'govuk-input--error'),
     id: "wc-name",
     name: "name",
     type: "text",
     "data-testid": "request-chat-user-name"
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "govuk-character-count",
+    className: "wc-form-group govuk-character-count",
     "data-module": "govuk-character-count",
     "data-maxlength": "500"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: (0,_lib_classnames_js__WEBPACK_IMPORTED_MODULE_2__.classnames)('govuk-form-group', errors.question && 'govuk-form-group--error')
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
-    className: "govuk-label",
+    className: "wc-label govuk-label",
     htmlFor: "wc-question"
   }, "Your question"), errors.question && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "govuk-error-message"
@@ -952,11 +1008,11 @@ function RequestChat({
     rows: "5",
     "aria-describedby": "wc-question-info",
     onChange: onQuestionChange,
-    className: (0,_lib_classnames_js__WEBPACK_IMPORTED_MODULE_2__.classnames)('govuk-textarea', 'govuk-js-character-count', !isQuestionLengthValid || errors.question ? 'govuk-textarea--error' : ''),
+    className: (0,_lib_classnames_js__WEBPACK_IMPORTED_MODULE_2__.classnames)('wc-textarea', 'govuk-textarea', 'govuk-js-character-count', !isQuestionLengthValid || errors.question ? 'govuk-textarea--error' : ''),
     "data-testid": "request-chat-user-question"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     id: "wc-question-info",
-    className: "govuk-hint govuk-character-count__message",
+    className: "wc-hint govuk-hint govuk-char-count__msg",
     style: {
       color: `${!isQuestionLengthValid ? '#d4351c' : ''}`
     },
@@ -965,18 +1021,18 @@ function RequestChat({
     className: "govuk-character-count__sr-status govuk-visually-hidden",
     "aria-live": "polite"
   }, questionHint))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "govuk-inset-text govuk-!-font-size-16"
+    className: "wc-inset-text govuk-inset-text"
   }, "By selecting 'Request chat' you agree to the terms of our\xA0", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "https://check-for-flooding.service.gov.uk/privacy-notice",
     target: "_blank",
     rel: "noreferrer",
     className: "govuk-link"
   }, "privacy notice"), "."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-    className: "govuk-button govuk-!-margin-top-1 govuk-!-font-size-16",
+    className: "wc-button govuk-button govuk-!-margin-top-1",
     "data-module": "govuk-button",
     onClick: onRequestChat,
     disabled: isButtonDisabled
-  }, buttonLabel))));
+  }, buttonLabel)))));
 }
 
 /***/ }),
@@ -1017,13 +1073,15 @@ function Settings({
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__.PanelHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-body"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-content"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("fieldset", {
     className: "govuk-fieldset govuk-!-margin-bottom-4"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("legend", {
     className: "govuk-fieldset__legend govuk-fieldset__legend"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     id: "wc-subtitle",
-    className: "govuk-heading-s"
+    className: "wc-heading"
   }, "Change settings")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "govuk-checkboxes govuk-checkboxes--small",
     "data-module": "govuk-checkboxes"
@@ -1038,7 +1096,7 @@ function Settings({
     defaultChecked: optionAudio,
     onChange: () => setOptionAudio(!optionAudio)
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
-    className: "govuk-label govuk-checkboxes__label govuk-!-font-size-16",
+    className: "wc-label govuk-label govuk-checkboxes__label",
     htmlFor: "audio"
   }, "Play a sound when receiving a new message")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "govuk-checkboxes__item"
@@ -1051,23 +1109,23 @@ function Settings({
     defaultChecked: optionScroll,
     onChange: () => setOptionScroll(!optionScroll)
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
-    className: "govuk-label govuk-checkboxes__label govuk-!-font-size-16",
+    className: "wc-label govuk-label govuk-checkboxes__label",
     htmlFor: "scroll"
   }, "Scroll automatically to a new message")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "govuk-button-group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     id: "settings-save",
     href: "#",
-    className: "govuk-button govuk-!-font-size-16",
+    className: "wc-button govuk-button",
     "data-module": "govuk-button",
     onClick: onSave
   }, "Save"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     id: "settings-cancel",
     href: "#",
-    className: "govuk-link govuk-!-font-size-16",
+    className: "wc-link govuk-link",
     "data-module": "govuk-button",
     onClick: onCancel
-  }, "Cancel"))));
+  }, "Cancel")))));
 }
 
 /***/ }),
@@ -1121,10 +1179,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 
-const setAriaHidden = bool => {
+const ariaHidden = 'aria-hidden';
+const dataWcInert = 'data-wc-inert';
+const setAriaHidden = isInert => {
   for (const node of document.body.children) {
     if (node.id !== 'wc-panel') {
-      bool ? node.setAttribute('aria-hidden', 'true') : node.removeAttribute('aria-hidden');
+      // We only want to toggle elements that aren't already inert
+      if (isInert && !node.getAttribute(ariaHidden)) {
+        node.setAttribute(ariaHidden, 'true');
+        node.setAttribute(dataWcInert, '');
+      } else if (node.hasAttribute(dataWcInert)) {
+        node.removeAttribute(ariaHidden);
+        node.removeAttribute(dataWcInert);
+      }
     }
   }
 };
@@ -1233,6 +1300,33 @@ const classnames = (...classes) => classes.filter(classname => classname && type
 
 /***/ }),
 
+/***/ "./src/client/lib/history.js":
+/*!***********************************!*\
+  !*** ./src/client/lib/history.js ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   historyPushState: () => (/* binding */ historyPushState),
+/* harmony export */   historyReplaceState: () => (/* binding */ historyReplaceState)
+/* harmony export */ });
+const historyPushState = () => {
+  const url = window.location.href.split('#')[0];
+  window.history.pushState({
+    history: true
+  }, null, `${url}#webchat`);
+};
+const historyReplaceState = () => {
+  if (window.history.state?.history) {
+    window.history.back();
+  }
+  const url = window.location.href.split('#')[0];
+  window.history.replaceState(null, null, url);
+};
+
+/***/ }),
+
 /***/ "./src/client/lib/message-notification.js":
 /*!************************************************!*\
   !*** ./src/client/lib/message-notification.js ***!
@@ -1415,6 +1509,24 @@ const AppProvider = ({
       payload: e.detail.data.case.status
     });
   };
+  const onMatchMedia = e => {
+    dispatch({
+      type: 'TOGGLE_IS_MOBILE',
+      payload: e.matches
+    });
+  };
+  const onKeydown = () => {
+    dispatch({
+      type: 'TOGGLE_IS_KEYBOARD',
+      payload: true
+    });
+  };
+  const onPointerdown = () => {
+    dispatch({
+      type: 'TOGGLE_IS_KEYBOARD',
+      payload: false
+    });
+  };
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     sdk.onChatEvent(_nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_1__.ChatEvent.LIVECHAT_RECOVERED, onLiveChatRecovered);
     sdk.onChatEvent(_nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_1__.ChatEvent.MESSAGE_CREATED, onMessageCreated);
@@ -1422,6 +1534,16 @@ const AppProvider = ({
     sdk.onChatEvent(_nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_1__.ChatEvent.AGENT_TYPING_ENDED, onAgentTypingEnded);
     sdk.onChatEvent(_nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_1__.ChatEvent.ASSIGNED_AGENT_CHANGED, onAssignedAgentChanged);
     sdk.onChatEvent(_nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_1__.ChatEvent.CONTACT_STATUS_CHANGED, onContactStatusChanged);
+    // We need to know if it is a mobile and if it is a keyboard interaction
+    window.matchMedia('(max-width: 640px)').addEventListener('change', onMatchMedia);
+    window.addEventListener('keydown', onKeydown);
+    window.addEventListener('pointerdown', onPointerdown);
+    // Tidying up
+    return () => {
+      window.removeEventListener('change', onMatchMedia);
+      window.removeEventListener('keydown', onKeydown);
+      window.removeEventListener('pointerdown', onPointerdown);
+    };
   }, [sdk]);
 
   /**
@@ -1435,18 +1557,31 @@ const AppProvider = ({
     setCustomerId(window.localStorage.getItem(_constants_js__WEBPACK_IMPORTED_MODULE_4__.CUSTOMER_ID_STORAGE_KEY));
     setThreadId(window.localStorage.getItem(_constants_js__WEBPACK_IMPORTED_MODULE_4__.THREAD_ID_STORAGE_KEY));
     setSettings(JSON.parse(window.localStorage.getItem(_constants_js__WEBPACK_IMPORTED_MODULE_4__.SETTINGS_STORAGE_KEY)) || state.settings);
+  }, []);
+
+  /**
+   * Set browser history on start chat click
+   */
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     if (window.location.hash === '#webchat') {
       setChatVisibility(true);
     }
+    const onBrowserNavigation = window.addEventListener('popstate', () => {
+      if (window.location.hash === '#webchat') {
+        setChatVisibility(true);
+      } else {
+        setChatVisibility(false);
+      }
+    });
+    return () => {
+      window.removeEventListener('popstate', onBrowserNavigation);
+    };
   }, []);
 
   /**
    * State update functions
    */
   const setChatVisibility = payload => {
-    if (!payload) {
-      window.location.hash = '';
-    }
     dispatch({
       type: 'SET_CHAT_VISIBILITY',
       payload
@@ -1617,6 +1752,18 @@ const setUnseenCount = (state, payload) => {
     unseenCount: payload
   };
 };
+const toggleIsMobile = (state, payload) => {
+  return {
+    ...state,
+    isMobile: payload
+  };
+};
+const toggleIsKeyboard = (state, payload) => {
+  return {
+    ...state,
+    isKeyboard: payload
+  };
+};
 const actionsMap = {
   SET_CHAT_VISIBILITY: setChatVisibility,
   SET_AVAILABILITY: setAvailability,
@@ -1629,7 +1776,9 @@ const actionsMap = {
   SET_AGENT: setAgent,
   SET_AGENT_TYPING: setAgentIsTyping,
   SET_AGENT_STATUS: setAgentStatus,
-  SET_UNSEEN_COUNT: setUnseenCount
+  SET_UNSEEN_COUNT: setUnseenCount,
+  TOGGLE_IS_MOBILE: toggleIsMobile,
+  TOGGLE_IS_KEYBOARD: toggleIsKeyboard
 };
 
 /***/ }),
@@ -1676,6 +1825,8 @@ const initialState = {
   agentStatus: null,
   isAgentTyping: false,
   isChatOpen: false,
+  isMobile: window.matchMedia('(max-width: 640px)').matches,
+  isKeyboard: false,
   settings: {
     audio: true,
     scroll: true