@defra/flood-webchat 0.0.1-beta.4 → 0.0.1-beta.40

package/dist/client.js

@@ -15,85 +15,94 @@ __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 _lib_classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../lib/classnames */ "./src/client/lib/classnames.js");
-/* harmony import */ var _lib_external_stores__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../lib/external-stores */ "./src/client/lib/external-stores.js");
-/* harmony import */ var _panel_panel_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../panel/panel.jsx */ "./src/client/components/panel/panel.jsx");
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-
-
-
-function Availability(props) {
-  var _useWebchatOpenState = (0,_lib_external_stores__WEBPACK_IMPORTED_MODULE_2__.useWebchatOpenState)(),
-    _useWebchatOpenState2 = _slicedToArray(_useWebchatOpenState, 2),
-    isOpen = _useWebchatOpenState2[0],
-    setOpen = _useWebchatOpenState2[1];
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFixed = _useState2[0],
-    setFixed = _useState2[1];
-  var buttonRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
-  var onClick = function onClick() {
-    setOpen(!isOpen);
-  };
-  var onKeyDown = function onKeyDown(event) {
+/* harmony import */ var _panel_panel_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../panel/panel.jsx */ "./src/client/components/panel/panel.jsx");
+/* harmony import */ var _skip_link_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../skip-link.jsx */ "./src/client/components/skip-link.jsx");
+/* harmony import */ var _store_useApp__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../store/useApp */ "./src/client/store/useApp.js");
+/* harmony import */ var _lib_history_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../lib/history.js */ "./src/client/lib/history.js");
+
+
+
+
+
+
+function Availability() {
+  const {
+    availability,
+    isChatOpen,
+    setChatVisibility,
+    unseenCount,
+    threadId,
+    setUnseenCount,
+    setInstigatorId
+  } = (0,_store_useApp__WEBPACK_IMPORTED_MODULE_4__.useApp)();
+  const buttonRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
+  const onClick = e => {
+    e.preventDefault();
+    setUnseenCount(0);
+    setChatVisibility(!isChatOpen);
+    setInstigatorId(e.target.id);
+    if (!isChatOpen) {
+      (0,_lib_history_js__WEBPACK_IMPORTED_MODULE_5__.historyPushState)();
+    } else {
+      (0,_lib_history_js__WEBPACK_IMPORTED_MODULE_5__.historyReplaceState)();
+    }
+  };
+  const onKeyDown = event => {
     if (event.key === ' ') {
       event.preventDefault();
     }
   };
-  var onKeyUp = function onKeyUp(event) {
+  const onKeyUp = event => {
     if (event.key === ' ') {
-      setOpen(!isOpen);
+      setUnseenCount(0);
+      setChatVisibility(!isChatOpen);
     }
   };
-  var intersectionCallback = function intersectionCallback(entries) {
-    var _entries = _slicedToArray(entries, 1),
-      entry = _entries[0];
-    var isBelowFold = !entry.isIntersecting && entry.boundingClientRect.top > 0;
-    setFixed(!isOpen && isBelowFold);
-  };
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    var _buttonRef$current;
-    var observer = new window.IntersectionObserver(intersectionCallback, {
-      rootMargin: '35px'
-    });
-    var parentElement = (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.parentElement;
-    if (parentElement) {
-      observer.observe(parentElement);
-    }
-    return function () {
-      if (parentElement) {
-        observer.unobserve(parentElement);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    const onScroll = () => {
+      if (!threadId) {
+        return;
+      }
+      if (availability !== 'AVAILABLE') {
+        return;
       }
+      const rect = buttonRef.current.parentElement.getBoundingClientRect();
+      const isBelowFold = rect.top + 35 > (window.innerHeight || document.documentElement.clientHeight);
+      const isFixed = !isChatOpen && isBelowFold;
+      document.documentElement.classList.toggle('wc-u-scroll-padding', isFixed);
+      document.body.classList.toggle('wc-u-scroll-padding', isFixed);
+      buttonRef.current.classList.toggle('wc-availability--fixed', isFixed);
+    };
+    document.addEventListener('scroll', onScroll);
+    onScroll();
+    return () => {
+      document.removeEventListener('scroll', onScroll);
     };
-  }, [buttonRef, isOpen]);
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    document.documentElement.classList.toggle('wc-scroll-padding', isFixed);
-    document.body.classList.toggle('wc-scroll-padding', isFixed);
-  }, [isFixed]);
-  switch (props.availability) {
+  }, [threadId, isChatOpen, availability]);
+  let TextComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, "Show chat");
+  if (!threadId) {
+    TextComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, "Start chat");
+  }
+  switch (availability) {
     case 'AVAILABLE':
       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("div", {
-        className: (0,_lib_classnames__WEBPACK_IMPORTED_MODULE_1__.classnames)('wc-availability', isFixed && 'wc-availability--fixed'),
+        className: (0,_lib_classnames__WEBPACK_IMPORTED_MODULE_1__.classnames)('wc-availability', isChatOpen && 'wc-open'),
         ref: buttonRef
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         className: "wc-availability__inner"
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+        id: "webchat-start-chat-link",
         className: "wc-availability__link",
         href: "#webchat",
-        role: "button",
         draggable: "false",
         onClick: onClick,
         onKeyUp: onKeyUp,
-        onKeyDown: onKeyDown
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(AvailabilityContent, null)))), isOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_jsx__WEBPACK_IMPORTED_MODULE_3__.Panel, {
-        screenNumber: 0,
-        onClose: onClick
-      }));
+        onKeyDown: onKeyDown,
+        role: "button",
+        "data-module": "govuk-button"
+      }, TextComponent, unseenCount > 0 && !isChatOpen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+        className: "wc-availability__unseen"
+      }, unseenCount) : null))), isChatOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_jsx__WEBPACK_IMPORTED_MODULE_2__.Panel, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_skip_link_jsx__WEBPACK_IMPORTED_MODULE_3__.SkipLink, null));
     case 'EXISTING':
     case 'UNAVAILABLE':
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
@@ -105,21 +114,327 @@ function Availability(props) {
       }, "Checking availability");
   }
 }
-function AvailabilityContent() {
-  var _useMessageThread = (0,_lib_external_stores__WEBPACK_IMPORTED_MODULE_2__.useMessageThread)(),
-    _useMessageThread2 = _slicedToArray(_useMessageThread, 1),
-    thread = _useMessageThread2[0];
-  var unreadMessageCount = thread.filter(function (message) {
-    return !message.read;
-  }).length;
-  if (!thread.length) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, "Start Chat");
+
+/***/ }),
+
+/***/ "./src/client/components/chat/chat.jsx":
+/*!*********************************************!*\
+  !*** ./src/client/components/chat/chat.jsx ***!
+  \*********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Chat: () => (/* binding */ Chat)
+/* harmony export */ });
+/* 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 _panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../panel/panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
+/* harmony import */ var _panel_panel_footer_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../panel/panel-footer.jsx */ "./src/client/components/panel/panel-footer.jsx");
+/* harmony import */ var _message_message_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../message/message.jsx */ "./src/client/components/message/message.jsx");
+/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
+/* harmony import */ var _hooks_useTextareaAutosize_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks/useTextareaAutosize.js */ "./src/client/hooks/useTextareaAutosize.js");
+/* harmony import */ var _lib_transform_messages_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../lib/transform-messages.js */ "./src/client/lib/transform-messages.js");
+/* harmony import */ var _lib_agent_status_headline_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../lib/agent-status-headline.js */ "./src/client/lib/agent-status-headline.js");
+
+
+
+
+
+
+
+
+function Chat({
+  onEndChatScreen,
+  onSettingsScreen
+}) {
+  const {
+    availability,
+    thread,
+    messages,
+    agent,
+    agentStatus,
+    isAgentTyping,
+    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)(() => {
+    if (settings.scroll && messages.length !== 0) {
+      const chatBody = document.querySelector('.wc-body');
+      chatBody.scrollTop = chatBody.scrollHeight;
+    }
+  }, [messages, isAgentTyping]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    const label = document.querySelector('.wc-form__label');
+    if (userMessage.length === 0) {
+      label.classList.remove('govuk-visually-hidden');
+    } else {
+      label.classList.add('govuk-visually-hidden');
+    }
+  }, [userMessage]);
+  const onChange = e => {
+    setUserMessage(e.target?.value);
+  };
+  const agentName = agent?.nickname || agent?.firstName;
+  const connectionHeadlineText = (0,_lib_agent_status_headline_js__WEBPACK_IMPORTED_MODULE_7__.agentStatusHeadline)(availability, agentStatus, agentName);
+  const sendMessage = () => {
+    if (messageRef.current.value.length === 0 || agentStatus === 'closed') {
+      return;
+    }
+    try {
+      thread.sendTextMessage(messageRef.current.value.trim());
+    } catch (err) {
+      console.log('[Chat Error] sendMessage', err);
+    }
+    setUserMessage('');
+  };
+  const handleSubmit = e => {
+    e.preventDefault();
+    sendMessage();
+  };
+  const saveChat = () => {
+    const transcript = (0,_lib_transform_messages_js__WEBPACK_IMPORTED_MODULE_6__.formatTranscript)(messages);
+    const saveChatLink = document.querySelector('#transcript-download');
+    saveChatLink.setAttribute('href', `data:text/plain;charset=utf-8,${transcript}`);
+  };
+  const handleKeyPress = e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      switch (e.target.id) {
+        case 'text-area':
+          e.preventDefault();
+          sendMessage();
+          break;
+        case 'end-chat':
+          onEndChatScreen(e);
+          break;
+        case 'wc-settings':
+          onSettingsScreen(e);
+          break;
+        case 'transcript-download':
+          saveChat();
+          break;
+        default:
+          break;
+      }
+    }
+    if (e.key === ' ') {
+      if (e.target.id === 'end-chat') {
+        onEndChatScreen(e);
+      }
+      if (e.target.id === 'wc-settings') {
+        onSettingsScreen(e);
+      }
+    }
+  };
+  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"
+  }, connectionHeadlineText), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    id: "end-chat",
+    className: "wc-status__link",
+    href: "#",
+    "data-module": "govuk-button",
+    role: "button",
+    onClick: onEndChatScreen,
+    onKeyDown: handleKeyPress
+  }, "End chat")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-body",
+    tabIndex: "0"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    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 outbound"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    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", {
+    width: "28",
+    height: "16",
+    x: "0px",
+    y: "0px",
+    viewBox: "0 0 28 16"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("circle", {
+    stroke: "none",
+    cx: "3",
+    cy: "8",
+    r: "3",
+    fill: "currentColor"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("circle", {
+    stroke: "none",
+    cx: "14",
+    cy: "8",
+    r: "3",
+    fill: "currentColor"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("circle", {
+    stroke: "none",
+    cx: "25",
+    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("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",
+    htmlFor: "wc-form-textarea"
+  }, "Your message", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    className: "govuk-visually-hidden"
+  }, " (enter key submits)")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", {
+    ref: messageRef,
+    rows: "1",
+    "aria-required": "true",
+    className: "wc-form__textarea",
+    id: "text-area",
+    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",
+    value: "Send",
+    "data-prevent-double-click": "true"
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-footer__settings"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: "#",
+    id: "wc-settings",
+    className: "wc-footer__settings-link",
+    "data-module": "govuk-button",
+    onKeyDown: handleKeyPress,
+    onClick: onSettingsScreen
+  }, "Settings"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: "#",
+    id: "transcript-download",
+    className: "wc-footer__settings-link",
+    "data-module": "govuk-button",
+    download: "floodline-webchat-transcript.txt",
+    onKeyDown: handleKeyPress,
+    onClick: saveChat
+  }, "Save chat"))));
+}
+
+/***/ }),
+
+/***/ "./src/client/components/errorSummary/error-summary.jsx":
+/*!**************************************************************!*\
+  !*** ./src/client/components/errorSummary/error-summary.jsx ***!
+  \**************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ErrorSummary: () => (/* binding */ ErrorSummary)
+/* harmony export */ });
+/* 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 ErrorSummary = ({
+  errors
+}) => {
+  const errs = Object.keys(errors);
+  const goToInput = e => {
+    e.preventDefault();
+    const key = e.target.getAttribute('data-key');
+    document.querySelector(`#wc-${key}`).focus();
+  };
+  if (errs.length === 0) {
+    return null;
   }
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, "Show Chat ", !!unreadMessageCount && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
-    className: "wc-availability__unseen"
-  }, unreadMessageCount), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-error-summary govuk-!-static-margin-bottom-7",
+    "data-module": "govuk-error-summary",
+    tabIndex: "-1"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    role: "alert"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", {
+    id: "wc-error",
+    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 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", {
+    href: "#",
+    "data-key": key,
+    onClick: goToInput
+  }, errors[key])))))));
+};
+
+/***/ }),
+
+/***/ "./src/client/components/message/message.jsx":
+/*!***************************************************!*\
+  !*** ./src/client/components/message/message.jsx ***!
+  \***************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Message: () => (/* binding */ Message)
+/* harmony export */ });
+/* 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 _lib_classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../lib/classnames */ "./src/client/lib/classnames.js");
+
+
+function Message({
+  message,
+  previousMessage
+}) {
+  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', outbound ? 'outbound' : 'inbound')
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    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"
-  }, " ", unreadMessageCount === 1 ? 'new message' : 'new messages')));
+  }, ":")), /*#__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));
+}
+
+/***/ }),
+
+/***/ "./src/client/components/panel/panel-footer.jsx":
+/*!******************************************************!*\
+  !*** ./src/client/components/panel/panel-footer.jsx ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   PanelFooter: () => (/* binding */ PanelFooter)
+/* harmony export */ });
+/* 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__);
+
+function PanelFooter({
+  children
+}) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-footer"
+  }, children);
 }
 
 /***/ }),
@@ -136,13 +451,43 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* 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(_ref) {
-  var screen = _ref.screen,
-    isConnected = _ref.isConnected,
-    onBack = _ref.onBack,
-    onClose = _ref.onClose;
-  var ButtonComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+
+function PanelHeader() {
+  const {
+    thread,
+    threadId,
+    setChatVisibility,
+    setUnseenCount,
+    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);
+    }
+  };
+  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
@@ -156,33 +501,41 @@ function PanelHeader(_ref) {
     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"
   })));
-  if (isConnected) {
-    ButtonComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-      className: "wc-hide-btn",
-      "aria-label": "Minimise the webchat",
-      "data-wc-hide-btn": true
-    }, /*#__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"
-    })));
+  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"
+  })));
+  const isMobileAndHasHistory = isMobile && window.history.state;
+  const isMobileAndNoHistory = isMobile && !window.history.state;
+  let RightButtonComponent = CloseButtonComponent;
+  if (threadId) {
+    RightButtonComponent = MinimiseButtonComponent;
+    if (isMobileAndNoHistory) {
+      RightButtonComponent = MinimiseButtonComponent;
+    }
+  }
+  if (!threadId && isMobileAndNoHistory) {
+    RightButtonComponent = CloseButtonComponent;
+  }
+  if (isMobileAndHasHistory) {
+    RightButtonComponent = null;
   }
-  var BackButtonComponent = !isConnected && screen !== 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: "#",
-    className: "wc-header__link govuk-back-link govuk-back-link--inverse",
-    onClick: onBack
-  }, "Back") : null;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-header"
-  }, BackButtonComponent, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", {
+  }, isMobileAndHasHistory ? 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);
 }
 
 /***/ }),
@@ -195,67 +548,802 @@ function PanelHeader(_ref) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Panel: () => (/* binding */ Panel),
-/* harmony export */   getFocusableElements: () => (/* binding */ getFocusableElements),
-/* harmony export */   setAriaHidden: () => (/* binding */ setAriaHidden)
+/* harmony export */   Panel: () => (/* binding */ Panel)
 /* harmony export */ });
 /* 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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "react-dom");
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _panel_header_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
+/* harmony import */ var _lib_classnames_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../lib/classnames.js */ "./src/client/lib/classnames.js");
 /* harmony import */ var _screens_pre_chat_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../screens/pre-chat.jsx */ "./src/client/components/screens/pre-chat.jsx");
 /* harmony import */ var _screens_request_chat_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../screens/request-chat.jsx */ "./src/client/components/screens/request-chat.jsx");
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/* harmony import */ var _chat_chat_jsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../chat/chat.jsx */ "./src/client/components/chat/chat.jsx");
+/* harmony import */ var _screens_unavailable_jsx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../screens/unavailable.jsx */ "./src/client/components/screens/unavailable.jsx");
+/* harmony import */ var _screens_end_chat_jsx__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../screens/end-chat.jsx */ "./src/client/components/screens/end-chat.jsx");
+/* harmony import */ var _screens_settings_jsx__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../screens/settings.jsx */ "./src/client/components/screens/settings.jsx");
+/* harmony import */ var _screens_feedback_jsx__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../screens/feedback.jsx */ "./src/client/components/screens/feedback.jsx");
+/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
+/* harmony import */ var _store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../store/useChatSdk.js */ "./src/client/store/useChatSdk.js");
+/* harmony import */ var _hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../hooks/useFocusedElements.js */ "./src/client/hooks/useFocusedElements.js");
+/* harmony import */ var _lib_history_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../lib/history.js */ "./src/client/lib/history.js");
 
 
 
 
 
-var setAriaHidden = function setAriaHidden(bool) {
-  var _iterator = _createForOfIteratorHelper(document.body.children),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var node = _step.value;
-      if (node.id !== 'wc-panel') {
-        bool ? node.setAttribute('aria-hidden', 'true') : node.removeAttribute('aria-hidden');
+
+
+
+
+
+
+
+
+
+function Panel() {
+  const {
+    sdk,
+    availability,
+    instigatorId,
+    thread,
+    threadId,
+    setThread,
+    setThreadId,
+    setChatVisibility,
+    setMessages,
+    setUnseenCount,
+    isMobile,
+    isKeyboard
+  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_10__.useApp)();
+  const {
+    fetchThread,
+    fetchMessages
+  } = (0,_store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_11__.useChatSdk)(sdk);
+  const [screen, setScreen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(threadId ? 2 : 0);
+  (0,_hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_12__.useFocusedElements)(screen);
+  const onEscapeKey = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => {
+    if (e.key === 'Escape' || e.key === 'Esc') {
+      if (threadId) {
+        thread?.lastMessageSeen();
+        setUnseenCount(0);
+      }
+      setChatVisibility(false);
+      (0,_lib_history_js__WEBPACK_IMPORTED_MODULE_13__.historyReplaceState)();
+      document.getElementById(instigatorId)?.focus();
+    }
+  }, [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)(() => {
+    document.addEventListener('keydown', onEscapeKey);
+    return () => {
+      document.removeEventListener('keydown', onEscapeKey);
+    };
+  }, [onEscapeKey, setChatVisibility]);
+
+  /**
+   * Recovers the thread if there is a threadId but no thread loaded in to state
+   */
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    const recover = async () => {
+      try {
+        const fetchedThread = await fetchThread(threadId);
+        setThread(fetchedThread);
+        const fetchedMessages = await fetchMessages(fetchedThread, threadId);
+        setMessages(fetchedMessages);
+      } catch (err) {
+        console.log('[Chat Error] fetchThread', err);
+        setThreadId();
+        setThread();
+        setScreen(0);
+      }
+    };
+    if (threadId) {
+      if (thread) {
+        thread.lastMessageSeen();
+        setUnseenCount(0);
+        setScreen(2);
+      } else {
+        recover();
+      }
+    }
+  }, [thread, threadId]);
+  const handleScreenChange = newScreen => e => {
+    e.preventDefault();
+    setScreen(newScreen);
+  };
+  const goToPreChatScreen = handleScreenChange(0);
+  const goToRequestChatScreen = handleScreenChange(1);
+  const goToChatScreen = handleScreenChange(2);
+  const goToEndChatScreen = handleScreenChange(3);
+  const goToFeedbackScreen = handleScreenChange(4);
+  const goToSettingsScreen = handleScreenChange(5);
+  let ScreenComponent;
+  switch (screen) {
+    case 0:
+      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_pre_chat_jsx__WEBPACK_IMPORTED_MODULE_3__.PreChat, {
+        onContinue: goToRequestChatScreen
+      });
+      break;
+    case 1:
+      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_request_chat_jsx__WEBPACK_IMPORTED_MODULE_4__.RequestChat, {
+        onPreChatScreen: goToPreChatScreen
+      });
+      break;
+    case 2:
+      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_chat_chat_jsx__WEBPACK_IMPORTED_MODULE_5__.Chat, {
+        onSettingsScreen: goToSettingsScreen,
+        onEndChatScreen: goToEndChatScreen
+      });
+      break;
+    case 3:
+      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_end_chat_jsx__WEBPACK_IMPORTED_MODULE_7__.EndChat, {
+        onChatScreen: goToChatScreen,
+        onEndChatConfirm: goToFeedbackScreen
+      });
+      break;
+    case 4:
+      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_feedback_jsx__WEBPACK_IMPORTED_MODULE_9__.Feedback, {
+        onCancel: () => setChatVisibility(false)
+      });
+      break;
+    case 5:
+      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_settings_jsx__WEBPACK_IMPORTED_MODULE_8__.Settings, {
+        onCancel: goToChatScreen
+      });
+      break;
+    default:
+      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_pre_chat_jsx__WEBPACK_IMPORTED_MODULE_3__.PreChat, {
+        onContinue: goToRequestChatScreen
+      });
+  }
+  if (availability === 'UNAVAILABLE') {
+    ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_unavailable_jsx__WEBPACK_IMPORTED_MODULE_6__.Unavailable, null);
+  }
+  const Component = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    id: "wc-panel",
+    role: "dialog",
+    className: (0,_lib_classnames_js__WEBPACK_IMPORTED_MODULE_2__.classnames)('wc-panel', isKeyboard && 'wc-focus-visible'),
+    tabIndex: "-1",
+    "aria-modal": "true",
+    "aria-labelledby": "wc-header-title"
+  }, /*#__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));
+}
+
+/***/ }),
+
+/***/ "./src/client/components/screens/end-chat.jsx":
+/*!****************************************************!*\
+  !*** ./src/client/components/screens/end-chat.jsx ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   EndChat: () => (/* binding */ EndChat)
+/* harmony export */ });
+/* 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 _panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../panel/panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
+/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
+
+
+
+function EndChat({
+  onChatScreen,
+  onEndChatConfirm
+}) {
+  const {
+    setCustomerId,
+    setThreadId,
+    setMessages,
+    agentStatus,
+    thread,
+    threadId,
+    setUnseenCount,
+    isKeyboard
+  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_2__.useApp)();
+  const confirmEndChat = async e => {
+    e.preventDefault();
+    window.localStorage.setItem('tmpThreadId', threadId);
+    setThreadId();
+    setMessages([]);
+    setCustomerId();
+    thread.lastMessageSeen();
+    setUnseenCount(0);
+
+    // End chat if still open
+    if (agentStatus !== 'closed') {
+      thread.endChat();
+    }
+    onEndChatConfirm(e);
+  };
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (isKeyboard) {
+      setTimeout(() => {
+        document.querySelector('#confirm-endchat').focus();
+      }, 10);
+    }
+  }, []);
+  const handleKeyPress = e => {
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'confirm-endchat') {
+      confirmEndChat(e);
+    }
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'resume-chat') {
+      onChatScreen(e);
+    }
+  };
+  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: "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", {
+    id: "confirm-endchat",
+    href: "#endChat",
+    role: "button",
+    className: "wc-button govuk-button",
+    "data-module": "govuk-button",
+    onClick: confirmEndChat,
+    onKeyDown: handleKeyPress
+  }, "Yes, end chat"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    id: "resume-chat",
+    href: "#resumeChat",
+    role: "button",
+    className: "wc-link govuk-link",
+    "data-module": "govuk-button",
+    onClick: onChatScreen,
+    onKeyDown: handleKeyPress
+  }, "No, resume chat")))));
+}
+
+/***/ }),
+
+/***/ "./src/client/components/screens/feedback.jsx":
+/*!****************************************************!*\
+  !*** ./src/client/components/screens/feedback.jsx ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Feedback: () => (/* binding */ Feedback)
+/* harmony export */ });
+/* 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 _panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../panel/panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
+
+
+function Feedback({
+  onCancel
+}) {
+  const feedbackSend = e => {
+    const tmpThreadId = window.localStorage.getItem('tmpThreadId');
+    window.location.href = `https://defragroup.eu.qualtrics.com/jfe/form/SV_8dgFSJcxxIfqx5Y?Id=${tmpThreadId}&Source=${window.location.href}`;
+    window.localStorage.removeItem('tmpThreadId');
+    onCancel(e);
+  };
+  const feedbackClose = async e => {
+    window.localStorage.removeItem('tmpThreadId');
+    onCancel(e);
+  };
+  const handleKeyPress = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      if (e.target.id === 'feedback-close') {
+        feedbackClose(e);
+      }
+      if (e.target.id === 'feedback-send') {
+        feedbackSend(e);
       }
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
+  };
+  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: "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", {
+    id: "feedback-send",
+    className: "govuk-link",
+    href: "#",
+    target: "_blank",
+    rel: "noreferrer",
+    onKeyDown: handleKeyPress,
+    onClick: feedbackSend
+  }, "Leave Feedback")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    id: "feedback-close",
+    className: "wc-link govuk-link",
+    href: "#",
+    "data-module": "govuk-button",
+    role: "button",
+    onKeyDown: handleKeyPress,
+    onClick: feedbackClose
+  }, "Close")))));
+}
+
+/***/ }),
+
+/***/ "./src/client/components/screens/pre-chat.jsx":
+/*!****************************************************!*\
+  !*** ./src/client/components/screens/pre-chat.jsx ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   PreChat: () => (/* binding */ PreChat)
+/* harmony export */ });
+/* 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 _panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../panel/panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
+
+
+function PreChat({
+  onContinue
+}) {
+  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: "wc-heading",
+    "aria-live": "polite"
+  }, "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",
+    rel: "noreferrer"
+  }, "sign up for flood warnings"), "\xA0and\xA0", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    className: "govuk-link",
+    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", 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 wc-button govuk-!-margin-top-1",
+    "data-module": "govuk-button",
+    onClick: onContinue
+  }, "Continue"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+    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")))));
+}
+
+/***/ }),
+
+/***/ "./src/client/components/screens/request-chat.jsx":
+/*!********************************************************!*\
+  !*** ./src/client/components/screens/request-chat.jsx ***!
+  \********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   RequestChat: () => (/* binding */ RequestChat)
+/* harmony export */ });
+/* 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 uuid__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! uuid */ "uuid");
+/* harmony import */ var uuid__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(uuid__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _lib_classnames_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../lib/classnames.js */ "./src/client/lib/classnames.js");
+/* harmony import */ var _panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../panel/panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
+/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
+/* harmony import */ var _store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../store/useChatSdk.js */ "./src/client/store/useChatSdk.js");
+/* harmony import */ var _errorSummary_error_summary_jsx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../errorSummary/error-summary.jsx */ "./src/client/components/errorSummary/error-summary.jsx");
+
+
+
+
+
+
+
+const QUESTION_MAX_LENGTH = 500;
+function RequestChat({
+  onPreChatScreen
+}) {
+  const {
+    sdk,
+    setCustomerId,
+    setThreadId,
+    setThread
+  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_4__.useApp)();
+  const {
+    fetchCustomerId,
+    fetchThread
+  } = (0,_store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_5__.useChatSdk)(sdk);
+  const [errors, setErrors] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({});
+  const [questionLength, setQuestionLength] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);
+  const [isButtonDisabled, setButtonDisabled] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+  const nameRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
+  const questionRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
+  const isQuestionLengthValid = QUESTION_MAX_LENGTH >= questionLength;
+  const questionLengthRemaining = QUESTION_MAX_LENGTH - questionLength;
+  const questionLengthExceeded = questionLength - QUESTION_MAX_LENGTH;
+  let questionHint = `You have ${questionLengthRemaining} characters remaining`;
+  if (!isQuestionLengthValid) {
+    questionHint = `You have ${questionLengthExceeded} characters too many`;
   }
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (Object.keys(errors).length) {
+      document.querySelector('.govuk-error-summary')?.focus();
+    }
+  }, [errors]);
+  const onQuestionChange = e => {
+    setQuestionLength(e.target.value.length);
+  };
+  const buttonLabel = isButtonDisabled ? 'Requesting...' : 'Request Chat';
+  const onRequestChat = async e => {
+    e.preventDefault();
+    if (isButtonDisabled) {
+      return;
+    }
+    const errs = {};
+    if (nameRef.current.value.length === 0) {
+      errs.name = 'Enter your name';
+    }
+    if (questionRef.current.value.length === 0) {
+      errs.question = 'Enter your question';
+    }
+    if (questionRef.current.value.length > QUESTION_MAX_LENGTH) {
+      errs.question = 'Your question must be 500 characters or less';
+    }
+    if (Object.keys(errs).length === 0) {
+      try {
+        setButtonDisabled(true);
+        const threadId = uuid__WEBPACK_IMPORTED_MODULE_1__.v4();
+        const customerId = await fetchCustomerId();
+        const thread = await fetchThread(threadId);
+        sdk.getCustomer().setName(nameRef.current.value);
+        await thread.startChat(questionRef.current.value || 'Begin conversation');
+        setCustomerId(customerId);
+        setThreadId(threadId);
+        setThread(thread);
+        thread.setCustomField('threadid', threadId);
+      } catch (err) {
+        console.log('[Request Chat Error]', err);
+      }
+    }
+    setErrors(errs);
+  };
+  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",
+    onClick: onPreChatScreen
+  }, "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: "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)('wc-form-group', 'govuk-form-group', errors.name && 'govuk-form-group--error')
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("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"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    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)('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: "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: "wc-label govuk-label",
+    htmlFor: "wc-question"
+  }, "Your question"), errors.question && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "govuk-error-message"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    className: "govuk-visually-hidden"
+  }, "Error:"), errors.question), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", {
+    ref: questionRef,
+    id: "wc-question",
+    name: "question",
+    rows: "5",
+    "aria-describedby": "wc-question-info",
+    onChange: onQuestionChange,
+    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: "wc-hint govuk-hint govuk-char-count__msg",
+    style: {
+      color: `${!isQuestionLengthValid ? '#d4351c' : ''}`
+    },
+    "aria-hidden": "true"
+  }, questionHint), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-character-count__sr-status govuk-visually-hidden",
+    "aria-live": "polite"
+  }, questionHint))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    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: "wc-button govuk-button govuk-!-margin-top-1",
+    "data-module": "govuk-button",
+    onClick: onRequestChat,
+    "aria-disabled": isButtonDisabled
+  }, buttonLabel)))));
+}
+
+/***/ }),
+
+/***/ "./src/client/components/screens/settings.jsx":
+/*!****************************************************!*\
+  !*** ./src/client/components/screens/settings.jsx ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Settings: () => (/* binding */ Settings)
+/* harmony export */ });
+/* 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 _panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../panel/panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
+/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
+
+
+
+function Settings({
+  onCancel
+}) {
+  const {
+    settings,
+    setSettings
+  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_2__.useApp)();
+  const [optionAudio, setOptionAudio] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(settings.audio);
+  const [optionScroll, setOptionScroll] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(settings.scroll);
+  const onSave = e => {
+    e.preventDefault();
+    setSettings({
+      audio: optionAudio,
+      scroll: optionScroll
+    });
+    onCancel(e);
+  };
+  const handleKeyPress = e => {
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'settings-save') {
+      onSave(e);
+    } else if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'settings-cancel') {
+      onCancel(e);
+    }
+  };
+  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: "wc-heading"
+  }, "Change settings")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-checkboxes govuk-checkboxes--small",
+    "data-module": "govuk-checkboxes"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-checkboxes__item"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    id: "audio",
+    name: "audio",
+    type: "checkbox",
+    value: "audio",
+    className: "govuk-checkboxes__input",
+    defaultChecked: optionAudio,
+    onChange: () => setOptionAudio(!optionAudio)
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    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"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    id: "scroll",
+    name: "scroll",
+    type: "checkbox",
+    value: "scroll",
+    className: "govuk-checkboxes__input",
+    defaultChecked: optionScroll,
+    onChange: () => setOptionScroll(!optionScroll)
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    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: "wc-button govuk-button",
+    "data-module": "govuk-button",
+    role: "button",
+    onClick: onSave,
+    onKeyDown: handleKeyPress
+  }, "Save"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    id: "settings-cancel",
+    href: "#",
+    className: "wc-link govuk-link",
+    "data-module": "govuk-button",
+    role: "button",
+    onClick: onCancel,
+    onKeyDown: handleKeyPress
+  }, "Cancel")))));
+}
+
+/***/ }),
+
+/***/ "./src/client/components/screens/unavailable.jsx":
+/*!*******************************************************!*\
+  !*** ./src/client/components/screens/unavailable.jsx ***!
+  \*******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Unavailable: () => (/* binding */ Unavailable)
+/* harmony export */ });
+/* 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 _panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../panel/panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
+
+
+function Unavailable() {
+  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("h3", {
+    id: "wc-subtitle",
+    className: "govuk-heading-m"
+  }, "Webchat is currently not available"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "govuk-body-s"
+  }, "Try again later, or call Floodline:"), /*#__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: "govuk-link",
+    href: "https://gov.uk/call-charges"
+  }, "Find out more about call charges")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "govuk-body-s"
+  }, "We're running webchat as a trial, it will not always be available.")));
+}
+
+/***/ }),
+
+/***/ "./src/client/components/skip-link.jsx":
+/*!*********************************************!*\
+  !*** ./src/client/components/skip-link.jsx ***!
+  \*********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SkipLink: () => (/* binding */ SkipLink)
+/* harmony export */ });
+/* 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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "react-dom");
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _store_useApp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../store/useApp */ "./src/client/store/useApp.js");
+
+
+
+const SkipLink = () => {
+  const {
+    threadId,
+    setInstigatorId
+  } = (0,_store_useApp__WEBPACK_IMPORTED_MODULE_2__.useApp)();
+  if (!threadId) {
+    return null;
+  }
+  const targetContainer = document.getElementById('skip-links');
+  if (!targetContainer) {
+    return null;
+  }
+  const onClick = e => {
+    e.preventDefault();
+    setInstigatorId(e.target.id);
+    window.location.hash = '#webchat';
+  };
+  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)( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    id: "webchat-skip-link",
+    href: "#webchat",
+    className: "govuk-skip-link",
+    "data-module": "govuk-skip-link",
+    onClick: onClick,
+    "data-wc-skiplink": true,
+    "data-wc-open-btn": true
+  }, "Skip to webchat"), targetContainer));
 };
-var getFocusableElements = function getFocusableElements() {
-  var selectors = ['#wc-panel a:not([disabled])', '#wc-panel button:not([disabled])', '#wc-panel select:not([disabled])', '#wc-panel input:not([disabled])', '#wc-panel textarea:not([disabled])', '#wc-panel *[tabindex="0"]:not([disabled])'];
-  var elements = document.body.querySelectorAll(selectors.join(','));
-  return Array.from(elements).filter(function (e) {
-    return !e.closest('[hidden]') && !e.closest('[aria-hidden="true"]');
-  });
+
+/***/ }),
+
+/***/ "./src/client/hooks/useFocusedElements.js":
+/*!************************************************!*\
+  !*** ./src/client/hooks/useFocusedElements.js ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   getFocusableElements: () => (/* binding */ getFocusableElements),
+/* harmony export */   useFocusedElements: () => (/* binding */ useFocusedElements)
+/* harmony export */ });
+/* 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 ariaHidden = 'aria-hidden';
+const dataWcInert = 'data-wc-inert';
+const setAriaHidden = isInert => {
+  for (const node of document.body.children) {
+    if (node.id !== 'wc-panel') {
+      // 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);
+      }
+    }
+  }
+};
+const getFocusableElements = () => {
+  const selectors = ['#wc-panel a:not([disabled])', '#wc-panel button:not([disabled])', '#wc-panel select:not([disabled])', '#wc-panel input:not([disabled])', '#wc-panel textarea:not([disabled])', '#wc-panel *[tabindex="0"]:not([disabled])'];
+  const elements = document.body.querySelectorAll(selectors.join(','));
+  return Array.from(elements).filter(e => !e.closest('[hidden]') && !e.closest('[aria-hidden="true"]'));
 };
-function Panel(_ref) {
-  var screenNumber = _ref.screenNumber,
-    onClose = _ref.onClose;
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(screenNumber),
-    _useState2 = _slicedToArray(_useState, 2),
-    screen = _useState2[0],
-    setScreen = _useState2[1];
-  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    panelElements = _useState4[0],
-    setPanelElements = _useState4[1];
-  var onKeyDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
-    if (e.key === 'Escape' || e.key === 'Esc') return onClose();
+const useFocusedElements = screen => {
+  const [panelElements, setPanelElements] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
+  const onKeyDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => {
+    const webchatPanelElement = document.querySelector('#wc-panel');
     if (e.key === 'Tab') {
-      var webchatPanelElement = document.querySelector('#wc-panel');
       if (webchatPanelElement && !document.activeElement.closest('#wc-panel')) {
         webchatPanelElement.focus();
       }
@@ -264,8 +1352,7 @@ function Panel(_ref) {
           panelElements[panelElements.length - 1].focus();
           e.preventDefault();
         } else if (document.activeElement === document.querySelector('#wc-panel')) {
-          var _panelElements;
-          (_panelElements = panelElements[panelElements.length - 1]) === null || _panelElements === void 0 ? void 0 : _panelElements.focus();
+          panelElements[panelElements.length - 1]?.focus();
           e.preventDefault();
         }
       } else if (document.activeElement === panelElements[panelElements.length - 1]) {
@@ -274,147 +1361,74 @@ function Panel(_ref) {
       }
     }
   }, [panelElements]);
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     setPanelElements(getFocusableElements());
   }, [screen]);
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     setAriaHidden(true);
-    document.querySelector('#wc-panel').focus();
+    const panelElement = document.querySelector('#wc-panel');
+    panelElement.focus();
     document.addEventListener('keydown', onKeyDown);
-    return function () {
-      var _document$body$queryS;
+    return () => {
       setAriaHidden();
-      (_document$body$queryS = document.body.querySelector('.wc-availability__link')) === null || _document$body$queryS === void 0 ? void 0 : _document$body$queryS.focus();
       document.removeEventListener('keydown', onKeyDown);
     };
   }, [panelElements]);
-  var onBack = function onBack(e) {
-    e.preventDefault();
-    setScreen(screen - 1);
-  };
-  var ScreenComponent;
-  switch (screen) {
-    case 0:
-      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_pre_chat_jsx__WEBPACK_IMPORTED_MODULE_3__.PreChat, {
-        screen: screen,
-        setScreen: setScreen
-      });
-      break;
-    case 1:
-      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_request_chat_jsx__WEBPACK_IMPORTED_MODULE_4__.RequestChat, {
-        onBack: onBack
-      });
-      break;
-    default:
-      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_pre_chat_jsx__WEBPACK_IMPORTED_MODULE_3__.PreChat, {
-        screen: screen,
-        setScreen: setScreen
-      });
-  }
-  var Component = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    id: "wc-panel",
-    className: "wc-panel",
-    role: "dialog",
-    tabIndex: "-1",
-    "aria-modal": "true",
-    "aria-labelledby": "wc-header-title"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_header_jsx__WEBPACK_IMPORTED_MODULE_2__.PanelHeader, {
-    screen: screen,
-    isConnected: false,
-    onBack: onBack,
-    onClose: onClose
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "wc-body"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "wc-content govuk-body-s"
-  }, ScreenComponent)));
-  return /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(Component, document.body);
-}
+};
+
 
 /***/ }),
 
-/***/ "./src/client/components/screens/pre-chat.jsx":
-/*!****************************************************!*\
-  !*** ./src/client/components/screens/pre-chat.jsx ***!
-  \****************************************************/
+/***/ "./src/client/hooks/useTextareaAutosize.js":
+/*!*************************************************!*\
+  !*** ./src/client/hooks/useTextareaAutosize.js ***!
+  \*************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   PreChat: () => (/* binding */ PreChat)
+/* harmony export */   useTextareaAutosize: () => (/* binding */ useTextareaAutosize)
 /* harmony export */ });
 /* 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__);
 
-function PreChat(_ref) {
-  var screen = _ref.screen,
-    setScreen = _ref.setScreen;
-  var onContinue = function onContinue(e) {
-    e.preventDefault();
-    setScreen(screen + 1);
-  };
-  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("h3", {
-    className: "govuk-heading-s"
-  }, "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 ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    className: "govuk-link",
-    href: "https://www.gov.uk/sign-up-for-flood-warnings"
-  }, "sign up for flood warnings"), " and ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    className: "govuk-link",
-    href: "https://defragroup.eu.qualtrics.com/jfe/form/SV_8uMAuaH3kbJl965?Source=https://check-for-flooding.service.gov.uk"
-  }, "manage your flood warnings account"), "."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "govuk-body-s"
-  }, "Do not use webchat to ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    className: "govuk-link",
-    href: "https://www.gov.uk/report-flood-cause"
-  }, "report a flood"), "."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-    className: "govuk-button",
-    "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: "govuk-link",
-    href: "https://gov.uk/call-charges"
-  }, "Find out more about call charges")));
-}
+const useTextareaAutosize = (textAreaRef, value) => {
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (textAreaRef) {
+      textAreaRef.style.height = '0px';
+      const scrollHeight = textAreaRef.scrollHeight;
+      textAreaRef.style.height = `${scrollHeight}px`;
+    }
+  }, [textAreaRef, value]);
+};
 
 /***/ }),
 
-/***/ "./src/client/components/screens/request-chat.jsx":
-/*!********************************************************!*\
-  !*** ./src/client/components/screens/request-chat.jsx ***!
-  \********************************************************/
+/***/ "./src/client/lib/agent-status-headline.js":
+/*!*************************************************!*\
+  !*** ./src/client/lib/agent-status-headline.js ***!
+  \*************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   RequestChat: () => (/* binding */ RequestChat)
+/* harmony export */   agentStatusHeadline: () => (/* binding */ agentStatusHeadline)
 /* harmony export */ });
-/* 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__);
-
-function RequestChat(_ref) {
-  var onBack = _ref.onBack;
-  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("a", {
-    href: "#",
-    className: "wc-back-link govuk-back-link",
-    onClick: onBack
-  }, "What you can use webchat for"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
-    className: "govuk-heading-s"
-  }, "Your name and question"));
-}
+const agentStatusHeadline = (availability, agentStatus, agentName) => {
+  if (availability === 'UNAVAILABLE') {
+    return 'Webchat is not currently available';
+  }
+  if (!agentStatus) {
+    return 'Connecting to Floodline';
+  }
+  switch (agentStatus) {
+    case 'closed':
+    case 'resolved':
+      return agentName ? `${agentName} ended the session` : 'Session ended by advisor';
+    default:
+      return agentName ? `You are speaking with ${agentName}` : 'No advisers currently available';
+  }
+};
 
 /***/ }),
 
@@ -428,37 +1442,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   checkAvailability: () => (/* binding */ checkAvailability)
 /* harmony export */ });
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return { value: void 0, done: !0 }; } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable || "" === iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } throw new TypeError(_typeof(iterable) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-function checkAvailability(_x) {
-  return _checkAvailability.apply(this, arguments);
-}
-function _checkAvailability() {
-  _checkAvailability = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(endpoint) {
-    var response, data;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _context.next = 2;
-          return fetch(endpoint);
-        case 2:
-          response = _context.sent;
-          _context.next = 5;
-          return response.json();
-        case 5:
-          data = _context.sent;
-          return _context.abrupt("return", {
-            availability: data.availability || 'UNAVAILABLE'
-          });
-        case 7:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return _checkAvailability.apply(this, arguments);
+async function checkAvailability(endpoint) {
+  const response = await fetch(endpoint);
+  const data = await response.json();
+  return {
+    availability: data.availability || 'UNAVAILABLE'
+  };
 }
 
 /***/ }),
@@ -473,120 +1462,654 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   classnames: () => (/* binding */ classnames)
 /* harmony export */ });
-var classnames = function classnames() {
-  for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
-    classes[_key] = arguments[_key];
+const classnames = (...classes) => classes.filter(classname => classname && typeof classname === 'string').join(' ');
+
+/***/ }),
+
+/***/ "./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) {
+    return window.history.back();
+  }
+  const url = window.location.href.split('#')[0];
+  return window.history.replaceState(null, null, url);
+};
+
+/***/ }),
+
+/***/ "./src/client/lib/message-notification.js":
+/*!************************************************!*\
+  !*** ./src/client/lib/message-notification.js ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   messageNotification: () => (/* binding */ messageNotification)
+/* harmony export */ });
+const messageNotification = audioUrl => {
+  let buffer;
+  const context = new (window.AudioContext || window.webkitAudioContext)();
+  if (context.state === 'suspended') {
+    const events = ['touchstart', 'touchend', 'mousedown', 'wheel', 'keydown', 'click'];
+    const unlock = _e => {
+      events.forEach(event => {
+        document.body.removeEventListener(event, unlock);
+      });
+      context.resume();
+    };
+    events.forEach(event => {
+      document.body.addEventListener(event, unlock, false);
+    });
   }
-  return classes.filter(function (classname) {
-    return classname && typeof classname === 'string';
-  }).join(' ');
+  fetch(audioUrl).then(response => response.arrayBuffer()).then(data => context.decodeAudioData(data)).then(decodedData => {
+    buffer = decodedData;
+  }).catch(console.error);
+  return () => {
+    const source = context.createBufferSource();
+    source.buffer = buffer;
+    source.connect(context.destination);
+    source.start();
+  };
 };
 
 /***/ }),
 
-/***/ "./src/client/lib/external-stores.js":
-/*!*******************************************!*\
-  !*** ./src/client/lib/external-stores.js ***!
-  \*******************************************/
+/***/ "./src/client/lib/transform-messages.js":
+/*!**********************************************!*\
+  !*** ./src/client/lib/transform-messages.js ***!
+  \**********************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   useMessageThread: () => (/* binding */ useMessageThread),
-/* harmony export */   useWebchatOpenState: () => (/* binding */ useWebchatOpenState)
+/* harmony export */   formatTranscript: () => (/* binding */ formatTranscript),
+/* harmony export */   transformMessage: () => (/* binding */ transformMessage),
+/* harmony export */   transformMessages: () => (/* binding */ transformMessages)
 /* harmony export */ });
-/* harmony import */ var _external_sync_store__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./external-sync-store */ "./src/client/lib/external-sync-store.js");
+/* harmony import */ var luxon__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! luxon */ "luxon");
+/* harmony import */ var luxon__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(luxon__WEBPACK_IMPORTED_MODULE_0__);
 
-var useWebchatOpenState = _external_sync_store__WEBPACK_IMPORTED_MODULE_0__["default"].create(false);
-var useMessageThread = _external_sync_store__WEBPACK_IMPORTED_MODULE_0__["default"].create([]);
+const transformMessage = message => {
+  return {
+    id: message.id,
+    text: message.messageContent?.text,
+    createdAt: new Date(message.createdAt),
+    user: message.authorEndUserIdentity?.fullName?.trim() || null,
+    assignee: message.authorUser?.firstName || null,
+    direction: message.direction
+  };
+};
+const transformMessages = messages => messages.map(message => transformMessage(message));
+const formatTranscript = messages => {
+  const now = luxon__WEBPACK_IMPORTED_MODULE_0__.DateTime.local();
+  now.setZone('Europe/London');
+  let string = `Floodline webchat transcript, ${now.toFormat('HH:mm:ss a, dd LLLL yyyy')}\n\n`;
+  for (const message of messages) {
+    const {
+      text,
+      direction,
+      user,
+      assignee,
+      createdAt
+    } = message;
+    const author = direction === 'inbound' ? user : `${assignee} (Floodline adviser)`;
+    const date = luxon__WEBPACK_IMPORTED_MODULE_0__.DateTime.fromJSDate(new Date(createdAt)).setZone('Europe/London').toFormat('HH:mm:ss a, dd LLLL yyyy');
+    string += `[${date}] ${author}: \n${text}\n\n`;
+  }
+  string = string.replace(/<a\b[^>]*>/i, '').replace(/<\/a>/i, '');
+  return encodeURIComponent(string);
+};
 
 /***/ }),
 
-/***/ "./src/client/lib/external-sync-store.js":
-/*!***********************************************!*\
-  !*** ./src/client/lib/external-sync-store.js ***!
-  \***********************************************/
+/***/ "./src/client/store/AppProvider.jsx":
+/*!******************************************!*\
+  !*** ./src/client/store/AppProvider.jsx ***!
+  \******************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (/* binding */ ExternalSyncStore)
+/* harmony export */   AppContext: () => (/* binding */ AppContext),
+/* harmony export */   AppProvider: () => (/* binding */ AppProvider)
 /* harmony export */ });
 /* 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__);
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
-var ExternalSyncStore = /*#__PURE__*/function () {
-  function ExternalSyncStore(initialValue) {
-    _classCallCheck(this, ExternalSyncStore);
-    this._value = initialValue;
-    this._listeners = [];
-  }
-  _createClass(ExternalSyncStore, [{
-    key: "update",
-    value: function update(value) {
-      this._value = value;
-      this.emitChange();
+/* harmony import */ var _nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @nice-devone/nice-cxone-chat-web-sdk */ "@nice-devone/nice-cxone-chat-web-sdk");
+/* harmony import */ var _nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _lib_message_notification_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../lib/message-notification.js */ "./src/client/lib/message-notification.js");
+/* harmony import */ var _reducer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reducer.js */ "./src/client/store/reducer.js");
+/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./constants.js */ "./src/client/store/constants.js");
+
+
+
+
+
+const AppContext = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(_reducer_js__WEBPACK_IMPORTED_MODULE_3__.initialState);
+const AppProvider = ({
+  sdk,
+  availability,
+  options,
+  children
+}) => {
+  const [state, dispatch] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useReducer)(_reducer_js__WEBPACK_IMPORTED_MODULE_3__.reducer, _reducer_js__WEBPACK_IMPORTED_MODULE_3__.initialState);
+  const playSound = (0,_lib_message_notification_js__WEBPACK_IMPORTED_MODULE_2__.messageNotification)(options.audioUrl);
+
+  /**
+   * SDK event handlers
+   */
+  const onLiveChatRecovered = e => {
+    dispatch({
+      type: 'SET_AGENT',
+      payload: e.detail.data.inboxAssignee
+    });
+    dispatch({
+      type: 'SET_AGENT_STATUS',
+      payload: e.detail.data.contact.status
+    });
+    dispatch({
+      type: 'SET_UNSEEN_COUNT',
+      payload: e.detail.data.contact.customerStatistics.unseenMessagesCount
+    });
+  };
+  const onAssignedAgentChanged = e => {
+    dispatch({
+      type: 'SET_AGENT',
+      payload: e.detail.data.inboxAssignee
+    });
+    dispatch({
+      type: 'SET_AGENT_STATUS',
+      payload: e.detail.data.case.status
+    });
+  };
+  const onAgentTypingStarted = () => {
+    dispatch({
+      type: 'SET_AGENT_TYPING',
+      payload: true
+    });
+  };
+  const onAgentTypingEnded = () => {
+    dispatch({
+      type: 'SET_AGENT_TYPING',
+      payload: false
+    });
+  };
+  const onMessageCreated = e => {
+    dispatch({
+      type: 'SET_MESSAGE',
+      payload: e.detail.data.message
+    });
+    dispatch({
+      type: 'SET_AGENT_STATUS',
+      payload: e.detail.data.case.status
+    });
+    dispatch({
+      type: 'SET_UNSEEN_COUNT',
+      payload: e.detail.data.case.customerStatistics.unseenMessagesCount
+    });
+    const isAudioOn = JSON.parse(window.localStorage.getItem(_constants_js__WEBPACK_IMPORTED_MODULE_4__.SETTINGS_STORAGE_KEY)).audio;
+    if (isAudioOn && e.detail.data.message.direction === 'outbound') {
+      playSound();
     }
-  }, {
-    key: "subscribe",
-    value: function subscribe(listener) {
-      var _this = this;
-      this._listeners = [].concat(_toConsumableArray(this._listeners), [listener]);
-      return function () {
-        _this._listeners = _this._listeners.filter(function (l) {
-          return l !== listener;
-        });
-      };
+  };
+  const onContactStatusChanged = e => {
+    dispatch({
+      type: 'SET_AGENT_STATUS',
+      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);
+    sdk.onChatEvent(_nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_1__.ChatEvent.AGENT_TYPING_STARTED, onAgentTypingStarted);
+    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]);
+
+  /**
+   * Initialize customerId, threadId and whether the webchat should be open
+   */
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    dispatch({
+      type: 'SET_AVAILABILITY',
+      payload: availability
+    });
+    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);
     }
-  }, {
-    key: "emitChange",
-    value: function emitChange() {
-      var _iterator = _createForOfIteratorHelper(this._listeners),
-        _step;
+    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 => {
+    dispatch({
+      type: 'SET_CHAT_VISIBILITY',
+      payload
+    });
+  };
+  const setCustomerId = customerId => {
+    dispatch({
+      type: 'SET_CUSTOMER_ID',
+      payload: customerId
+    });
+  };
+  const setThreadId = threadId => {
+    dispatch({
+      type: 'SET_THREAD_ID',
+      payload: threadId
+    });
+  };
+  const setThread = thread => {
+    dispatch({
+      type: 'SET_THREAD',
+      payload: thread
+    });
+  };
+  const setMessages = messages => {
+    dispatch({
+      type: 'SET_MESSAGES',
+      payload: messages
+    });
+  };
+  const setSettings = data => {
+    dispatch({
+      type: 'SET_SETTINGS',
+      payload: data
+    });
+  };
+  const setUnseenCount = unseenCount => {
+    dispatch({
+      type: 'SET_UNSEEN_COUNT',
+      payload: unseenCount
+    });
+  };
+  const setInstigatorId = id => {
+    dispatch({
+      type: 'SET_INSTIGATOR_ID',
+      payload: id
+    });
+  };
+
+  /**
+   * Application-wide state and state functions
+   */
+  const store = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({
+    ...state,
+    sdk,
+    setSettings,
+    setCustomerId,
+    setThreadId,
+    setThread,
+    setMessages,
+    setUnseenCount,
+    setChatVisibility,
+    setInstigatorId,
+    onLiveChatRecovered,
+    onAssignedAgentChanged,
+    onAgentTypingStarted,
+    onAgentTypingEnded,
+    onMessageCreated,
+    onContactStatusChanged
+  }));
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(AppContext.Provider, {
+    value: store
+  }, children);
+};
+
+/***/ }),
+
+/***/ "./src/client/store/actions-map.js":
+/*!*****************************************!*\
+  !*** ./src/client/store/actions-map.js ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   actionsMap: () => (/* binding */ actionsMap)
+/* harmony export */ });
+/* harmony import */ var _lib_transform_messages__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../lib/transform-messages */ "./src/client/lib/transform-messages.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ "./src/client/store/constants.js");
+
+
+const setSettings = (state, payload) => {
+  if (payload) {
+    window.localStorage.setItem(_constants__WEBPACK_IMPORTED_MODULE_1__.SETTINGS_STORAGE_KEY, JSON.stringify(payload));
+  } else {
+    window.localStorage.removeItem(_constants__WEBPACK_IMPORTED_MODULE_1__.SETTINGS_STORAGE_KEY);
+  }
+  return {
+    ...state,
+    settings: payload
+  };
+};
+const setCustomerId = (state, payload) => {
+  if (payload) {
+    window.localStorage.setItem(_constants__WEBPACK_IMPORTED_MODULE_1__.CUSTOMER_ID_STORAGE_KEY, payload);
+  } else {
+    window.localStorage.removeItem(_constants__WEBPACK_IMPORTED_MODULE_1__.CUSTOMER_ID_STORAGE_KEY);
+  }
+  return {
+    ...state,
+    customerId: payload
+  };
+};
+const setThreadId = (state, payload) => {
+  if (payload) {
+    window.localStorage.setItem(_constants__WEBPACK_IMPORTED_MODULE_1__.THREAD_ID_STORAGE_KEY, payload);
+  } else {
+    window.localStorage.removeItem(_constants__WEBPACK_IMPORTED_MODULE_1__.THREAD_ID_STORAGE_KEY);
+  }
+  return {
+    ...state,
+    threadId: payload
+  };
+};
+const setChatVisibility = (state, payload) => {
+  return {
+    ...state,
+    isChatOpen: payload
+  };
+};
+const setAvailability = (state, payload) => {
+  return {
+    ...state,
+    availability: payload
+  };
+};
+const setThread = (state, payload) => {
+  return {
+    ...state,
+    thread: payload
+  };
+};
+const setMessage = (state, payload) => {
+  return {
+    ...state,
+    messages: [...state.messages, (0,_lib_transform_messages__WEBPACK_IMPORTED_MODULE_0__.transformMessage)(payload)]
+  };
+};
+const setMessages = (state, payload) => {
+  return {
+    ...state,
+    messages: (0,_lib_transform_messages__WEBPACK_IMPORTED_MODULE_0__.transformMessages)(payload).reverse()
+  };
+};
+const setAgent = (state, payload) => {
+  return {
+    ...state,
+    agent: payload
+  };
+};
+const setAgentIsTyping = (state, payload) => {
+  return {
+    ...state,
+    isAgentTyping: payload
+  };
+};
+const setAgentStatus = (state, payload) => {
+  return {
+    ...state,
+    agentStatus: payload
+  };
+};
+const setUnseenCount = (state, payload) => {
+  return {
+    ...state,
+    unseenCount: payload
+  };
+};
+const setInstigatorId = (state, payload) => {
+  return {
+    ...state,
+    instigatorId: 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,
+  SET_SETTINGS: setSettings,
+  SET_CUSTOMER_ID: setCustomerId,
+  SET_THREAD_ID: setThreadId,
+  SET_THREAD: setThread,
+  SET_MESSAGE: setMessage,
+  SET_MESSAGES: setMessages,
+  SET_AGENT: setAgent,
+  SET_AGENT_TYPING: setAgentIsTyping,
+  SET_AGENT_STATUS: setAgentStatus,
+  SET_UNSEEN_COUNT: setUnseenCount,
+  SET_INSTIGATOR_ID: setInstigatorId,
+  TOGGLE_IS_MOBILE: toggleIsMobile,
+  TOGGLE_IS_KEYBOARD: toggleIsKeyboard
+};
+
+/***/ }),
+
+/***/ "./src/client/store/constants.js":
+/*!***************************************!*\
+  !*** ./src/client/store/constants.js ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   CUSTOMER_ID_STORAGE_KEY: () => (/* binding */ CUSTOMER_ID_STORAGE_KEY),
+/* harmony export */   SETTINGS_STORAGE_KEY: () => (/* binding */ SETTINGS_STORAGE_KEY),
+/* harmony export */   THREAD_ID_STORAGE_KEY: () => (/* binding */ THREAD_ID_STORAGE_KEY)
+/* harmony export */ });
+const SETTINGS_STORAGE_KEY = 'webchat_settings';
+const CUSTOMER_ID_STORAGE_KEY = 'webchat_customer_id';
+const THREAD_ID_STORAGE_KEY = 'webchat_thread_id';
+
+/***/ }),
+
+/***/ "./src/client/store/reducer.js":
+/*!*************************************!*\
+  !*** ./src/client/store/reducer.js ***!
+  \*************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   initialState: () => (/* binding */ initialState),
+/* harmony export */   reducer: () => (/* binding */ reducer)
+/* harmony export */ });
+/* harmony import */ var _actions_map__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./actions-map */ "./src/client/store/actions-map.js");
+
+const initialState = {
+  availability: null,
+  customerId: null,
+  threadId: null,
+  thread: null,
+  messages: [],
+  unseenCount: 0,
+  instigatorId: null,
+  agent: null,
+  agentStatus: null,
+  isAgentTyping: false,
+  isChatOpen: false,
+  isMobile: window.matchMedia('(max-width: 640px)').matches,
+  isKeyboard: false,
+  settings: {
+    audio: true,
+    scroll: true
+  }
+};
+const reducer = (state, action) => {
+  const {
+    type,
+    payload
+  } = action;
+  const fn = _actions_map__WEBPACK_IMPORTED_MODULE_0__.actionsMap[type];
+  if (fn) {
+    const actionFunction = fn.bind(undefined, state, payload);
+    return actionFunction();
+  }
+  return state;
+};
+
+/***/ }),
+
+/***/ "./src/client/store/useApp.js":
+/*!************************************!*\
+  !*** ./src/client/store/useApp.js ***!
+  \************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useApp: () => (/* binding */ useApp)
+/* harmony export */ });
+/* 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 _AppProvider_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AppProvider.jsx */ "./src/client/store/AppProvider.jsx");
+
+
+const useApp = () => (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_AppProvider_jsx__WEBPACK_IMPORTED_MODULE_1__.AppContext);
+
+/***/ }),
+
+/***/ "./src/client/store/useChatSdk.js":
+/*!****************************************!*\
+  !*** ./src/client/store/useChatSdk.js ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useChatSdk: () => (/* binding */ useChatSdk)
+/* harmony export */ });
+const useChatSdk = sdk => {
+  const connect = async () => sdk.authorize();
+  const fetchCustomerId = async () => {
+    const response = await connect();
+    return response?.consumerIdentity.idOnExternalPlatform;
+  };
+  const fetchThread = async threadId => {
+    await connect();
+    return sdk.getThread(threadId);
+  };
+  const fetchMessages = async (thread, threadId) => {
+    await connect();
+    const recovered = await thread.recover(threadId);
+    const allMessages = [];
+    let fetchedMessages = recovered.messages;
+    while (fetchedMessages.length) {
+      fetchedMessages.map(msg => allMessages.push(msg));
       try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var listener = _step.value;
-          listener();
-        }
+        const response = await thread.loadMoreMessages();
+        fetchedMessages = response.data.messages;
       } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
+        fetchedMessages = [];
       }
     }
-  }, {
-    key: "getSnapshot",
-    value: function getSnapshot() {
-      return this._value;
-    }
-  }], [{
-    key: "create",
-    value: function create(initialValue) {
-      var store = new ExternalSyncStore(initialValue);
-      var boundSubscribe = store.subscribe.bind(store);
-      var boundGetSnapshot = store.getSnapshot.bind(store);
-      var boundUpdate = store.update.bind(store);
-      return function () {
-        return [(0,react__WEBPACK_IMPORTED_MODULE_0__.useSyncExternalStore)(boundSubscribe, boundGetSnapshot), boundUpdate];
-      };
-    }
-  }]);
-  return ExternalSyncStore;
-}();
+    return allMessages;
+  };
+  return {
+    connect,
+    fetchCustomerId,
+    fetchThread,
+    fetchMessages
+  };
+};
+
+/***/ }),
+
+/***/ "@nice-devone/nice-cxone-chat-web-sdk":
+/*!*******************************************************!*\
+  !*** external "@nice-devone/nice-cxone-chat-web-sdk" ***!
+  \*******************************************************/
+/***/ ((module) => {
+
+module.exports = require("@nice-devone/nice-cxone-chat-web-sdk");
+
+/***/ }),
+
+/***/ "luxon":
+/*!************************!*\
+  !*** external "luxon" ***!
+  \************************/
+/***/ ((module) => {
 
+module.exports = require("luxon");
 
 /***/ }),
 
@@ -618,6 +2141,16 @@ module.exports = require("react-dom");
 
 module.exports = require("react-dom/client");
 
+/***/ }),
+
+/***/ "uuid":
+/*!***********************!*\
+  !*** external "uuid" ***!
+  \***********************/
+/***/ ((module) => {
+
+module.exports = require("uuid");
+
 /***/ })
 
 /******/ 	});
@@ -702,49 +2235,39 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom/client */ "react-dom/client");
 /* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom_client__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _components_availability_availability_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/availability/availability.jsx */ "./src/client/components/availability/availability.jsx");
-/* harmony import */ var _lib_check_availability__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./lib/check-availability */ "./src/client/lib/check-availability.js");
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return { value: void 0, done: !0 }; } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable || "" === iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } throw new TypeError(_typeof(iterable) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+/* harmony import */ var _nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @nice-devone/nice-cxone-chat-web-sdk */ "@nice-devone/nice-cxone-chat-web-sdk");
+/* harmony import */ var _nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _components_availability_availability_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/availability/availability.jsx */ "./src/client/components/availability/availability.jsx");
+/* harmony import */ var _lib_check_availability__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./lib/check-availability */ "./src/client/lib/check-availability.js");
+/* harmony import */ var _store_AppProvider_jsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./store/AppProvider.jsx */ "./src/client/store/AppProvider.jsx");
+/* harmony import */ var _store_constants_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./store/constants.js */ "./src/client/store/constants.js");
 
 
 
 
-function init(_x, _x2) {
-  return _init.apply(this, arguments);
-}
-function _init() {
-  _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(container, options) {
-    var root, availability, result;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          root = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_1__.createRoot)(container);
-          _context.prev = 1;
-          _context.next = 4;
-          return (0,_lib_check_availability__WEBPACK_IMPORTED_MODULE_3__.checkAvailability)(options.availabilityEndpoint);
-        case 4:
-          result = _context.sent;
-          availability = result.availability;
-          _context.next = 11;
-          break;
-        case 8:
-          _context.prev = 8;
-          _context.t0 = _context["catch"](1);
-          availability = 'UNAVAILABLE';
-        case 11:
-          root.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_availability_availability_jsx__WEBPACK_IMPORTED_MODULE_2__.Availability, {
-            availability: availability
-          }));
-        case 12:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[1, 8]]);
-  }));
-  return _init.apply(this, arguments);
+
+
+
+async function init(container, options) {
+  const sdk = new _nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_2__.ChatSdk({
+    brandId: options.brandId,
+    channelId: options.channelId,
+    customerId: window.localStorage.getItem(_store_constants_js__WEBPACK_IMPORTED_MODULE_6__.CUSTOMER_ID_STORAGE_KEY) || '',
+    environment: options.environment
+  });
+  const root = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_1__.createRoot)(container);
+  let availability;
+  try {
+    const result = await (0,_lib_check_availability__WEBPACK_IMPORTED_MODULE_4__.checkAvailability)(options.availabilityEndpoint);
+    availability = result.availability;
+  } catch (e) {
+    availability = 'UNAVAILABLE';
+  }
+  root.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_store_AppProvider_jsx__WEBPACK_IMPORTED_MODULE_5__.AppProvider, {
+    sdk: sdk,
+    availability: availability,
+    options: options
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_availability_availability_jsx__WEBPACK_IMPORTED_MODULE_3__.Availability, null)));
 }
 })();