@defra/flood-webchat 0.0.1-beta.17 → 0.0.1-beta.19

package/dist/client.js

@@ -114,15 +114,12 @@ __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 sanitize_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! sanitize-html */ "sanitize-html");
-/* harmony import */ var sanitize_html__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(sanitize_html__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../panel/panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
-/* harmony import */ var _panel_panel_footer_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../panel/panel-footer.jsx */ "./src/client/components/panel/panel-footer.jsx");
-/* harmony import */ var _message_message_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../message/message.jsx */ "./src/client/components/message/message.jsx");
-/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
-/* harmony import */ var _hooks_useTextareaAutosize_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../hooks/useTextareaAutosize.js */ "./src/client/hooks/useTextareaAutosize.js");
-/* harmony import */ var _lib_transform_messages_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../lib/transform-messages.js */ "./src/client/lib/transform-messages.js");
-
+/* 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");
 
 
 
@@ -131,7 +128,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 function Chat({
-  onEndChat
+  onEndChatScreen,
+  onSettingsScreen
 }) {
   const {
     availability,
@@ -139,13 +137,14 @@ function Chat({
     messages,
     agent,
     agentStatus,
-    isAgentTyping
-  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_5__.useApp)();
+    isAgentTyping,
+    settings
+  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_4__.useApp)();
   const [userMessage, setUserMessage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
   const messageRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
-  (0,_hooks_useTextareaAutosize_js__WEBPACK_IMPORTED_MODULE_6__.useTextareaAutosize)(messageRef.current, userMessage);
+  (0,_hooks_useTextareaAutosize_js__WEBPACK_IMPORTED_MODULE_5__.useTextareaAutosize)(messageRef.current, userMessage);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-    if (messages.length !== 0) {
+    if (settings.scroll && messages.length !== 0) {
       const chatBody = document.querySelector('.wc-body');
       chatBody.scrollTop = chatBody.scrollHeight;
     }
@@ -181,19 +180,19 @@ function Chat({
       return;
     }
     try {
-      thread.sendTextMessage(sanitize_html__WEBPACK_IMPORTED_MODULE_1___default()(messageRef.current.value.trim()));
+      thread.sendTextMessage(messageRef.current.value.trim());
     } catch (err) {
       console.log('[Chat Error] sendMessage', err);
     }
     setUserMessage('');
   };
   const saveChat = () => {
-    const transcript = (0,_lib_transform_messages_js__WEBPACK_IMPORTED_MODULE_7__.formatTranscript)(messages);
+    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}`);
     saveChatLink.click();
   };
-  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_2__.PanelHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__.PanelHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-status"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "wc-status__availability govuk-body-s"
@@ -201,14 +200,14 @@ function Chat({
     className: "wc-status__link govuk-!-font-size-16",
     href: "#",
     "data-module": "govuk-button",
-    onClick: onEndChat
+    onClick: onEndChatScreen
   }, "End chat")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-body"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-chat__body"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
     className: "wc-chat__messages"
-  }, messages.length ? messages.map((msg, index) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_message_message_jsx__WEBPACK_IMPORTED_MODULE_4__.Message, {
+  }, 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]
@@ -242,7 +241,7 @@ function Chat({
     cy: "8",
     r: "3",
     fill: "currentColor"
-  })))) : null))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_footer_jsx__WEBPACK_IMPORTED_MODULE_3__.PanelFooter, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  })))) : null))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_footer_jsx__WEBPACK_IMPORTED_MODULE_2__.PanelFooter, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-footer__input"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("form", {
     className: "wc-form",
@@ -271,8 +270,10 @@ function Chat({
     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"
+    "data-module": "govuk-button",
+    onClick: onSettingsScreen
   }, "Settings"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "#",
     id: "transcript-download",
@@ -415,6 +416,7 @@ function PanelHeader() {
   const onClose = e => {
     e.preventDefault();
     setChatVisibility(false);
+    thread.lastMessageSeen();
     setUnseenCount(0);
   };
   let ButtonComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
@@ -476,9 +478,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _chat_chat_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../chat/chat.jsx */ "./src/client/components/chat/chat.jsx");
 /* harmony import */ var _screens_unavailable_jsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../screens/unavailable.jsx */ "./src/client/components/screens/unavailable.jsx");
 /* harmony import */ var _screens_end_chat_jsx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../screens/end-chat.jsx */ "./src/client/components/screens/end-chat.jsx");
-/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
-/* harmony import */ var _store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../store/useChatSdk.js */ "./src/client/store/useChatSdk.js");
-/* harmony import */ var _hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../hooks/useFocusedElements.js */ "./src/client/hooks/useFocusedElements.js");
+/* harmony import */ var _screens_settings_jsx__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../screens/settings.jsx */ "./src/client/components/screens/settings.jsx");
+/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
+/* harmony import */ var _store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../store/useChatSdk.js */ "./src/client/store/useChatSdk.js");
+/* harmony import */ var _hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../hooks/useFocusedElements.js */ "./src/client/hooks/useFocusedElements.js");
+
 
 
 
@@ -500,13 +504,13 @@ function Panel() {
     setChatVisibility,
     setMessages,
     setUnseenCount
-  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_7__.useApp)();
+  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_8__.useApp)();
   const {
     fetchThread,
     fetchMessages
-  } = (0,_store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_8__.useChatSdk)(sdk);
+  } = (0,_store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_9__.useChatSdk)(sdk);
   const [screen, setScreen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(threadId ? 2 : 0);
-  (0,_hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_9__.useFocusedElements)(screen);
+  (0,_hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_10__.useFocusedElements)(screen);
 
   /**
    * Initializes the eventListener for pressing the escape key
@@ -554,41 +558,42 @@ function Panel() {
     e.preventDefault();
     setScreen(newScreen);
   };
-  const onForward = handleScreenChange(screen + 1);
-  const onBack = handleScreenChange(screen - 1);
-  const onEndChat = handleScreenChange(3);
-  const onResume = handleScreenChange(2);
-  const onEndChatConfirm = e => {
-    e.preventDefault();
-    console.log('confirmed end chat');
-  };
+  const goToPreChatScreen = handleScreenChange(0);
+  const goToRequestChatScreen = handleScreenChange(1);
+  const goToChatScreen = handleScreenChange(2);
+  const goToEndChatScreen = handleScreenChange(3);
+  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_2__.PreChat, {
-        onForward: onForward
+        onContinue: goToRequestChatScreen
       });
       break;
     case 1:
       ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_request_chat_jsx__WEBPACK_IMPORTED_MODULE_3__.RequestChat, {
-        onBack: onBack
+        onPreChatScreen: goToPreChatScreen
       });
       break;
     case 2:
       ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_chat_chat_jsx__WEBPACK_IMPORTED_MODULE_4__.Chat, {
-        setScreen: setScreen,
-        onEndChat: onEndChat
+        onSettingsScreen: goToSettingsScreen,
+        onEndChatScreen: goToEndChatScreen
       });
       break;
     case 3:
       ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_end_chat_jsx__WEBPACK_IMPORTED_MODULE_6__.EndChat, {
-        onResume: onResume,
-        onEndChatConfirm: onEndChatConfirm
+        onChatScreen: goToChatScreen
+      });
+      break;
+    case 5:
+      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_settings_jsx__WEBPACK_IMPORTED_MODULE_7__.Settings, {
+        onCancel: goToChatScreen
       });
       break;
     default:
       ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_pre_chat_jsx__WEBPACK_IMPORTED_MODULE_2__.PreChat, {
-        onForward: onForward
+        onContinue: goToRequestChatScreen
       });
   }
   if (availability === 'UNAVAILABLE') {
@@ -596,8 +601,8 @@ function Panel() {
   }
   const Component = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     id: "wc-panel",
-    className: "wc-panel",
     role: "dialog",
+    className: "wc-panel",
     tabIndex: "-1",
     "aria-modal": "true",
     "aria-labelledby": "wc-header-title"
@@ -623,8 +628,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 function EndChat({
-  onResume,
-  onEndChatConfirm
+  onChatScreen
 }) {
   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"
@@ -636,12 +640,11 @@ function EndChat({
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "#",
     className: "govuk-button govuk-!-font-size-16",
-    "data-module": "govuk-button",
-    onClick: onEndChatConfirm
+    "data-module": "govuk-button"
   }, "Yes, end chat"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "#",
     className: "govuk-link govuk-!-font-size-16",
-    onClick: onResume
+    onClick: onChatScreen
   }, "No, resume chat"))));
 }
 
@@ -663,7 +666,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 function PreChat({
-  onForward
+  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"
@@ -680,19 +683,25 @@ function PreChat({
     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"
+    href: "https://www.gov.uk/sign-up-for-flood-warnings",
+    target: "_blank",
+    rel: "noreferrer"
   }, "sign up for flood warnings"), ' and ', /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     className: "govuk-link",
-    href: "https://www.fws.environment-agency.gov.uk/app/olr/login"
+    href: "https://www.fws.environment-agency.gov.uk/app/olr/login",
+    target: "_blank",
+    rel: "noreferrer"
   }, "manage your flood warnings account"), "."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "govuk-body-s"
-  }, "Do not use webchat to ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, '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"
+    href: "https://www.gov.uk/report-flood-cause",
+    target: "_blank",
+    rel: "noreferrer"
   }, "report a flood"), "."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     className: "govuk-button govuk-!-font-size-16",
     "data-module": "govuk-button",
-    onClick: onForward
+    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", {
@@ -701,7 +710,9 @@ function PreChat({
     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"
+    href: "https://gov.uk/call-charges",
+    target: "_blank",
+    rel: "noreferrer"
   }, "Find out more about call charges"))));
 }
 
@@ -735,7 +746,7 @@ __webpack_require__.r(__webpack_exports__);
 
 const QUESTION_MAX_LENGTH = 500;
 function RequestChat({
-  onBack
+  onPreChatScreen
 }) {
   const {
     sdk,
@@ -799,7 +810,7 @@ function RequestChat({
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "#",
     className: "wc-back-link govuk-back-link",
-    onClick: onBack
+    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", {
@@ -862,6 +873,97 @@ function RequestChat({
 
 /***/ }),
 
+/***/ "./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);
+  };
+  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("fieldset", {
+    className: "govuk-fieldset govuk-!-margin-bottom-4"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("legend", {
+    className: "govuk-fieldset__legend govuk-fieldset__legend"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+    id: "wc-subtitle",
+    className: "govuk-heading-s"
+  }, "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: "govuk-label govuk-checkboxes__label govuk-!-font-size-16",
+    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: "govuk-label govuk-checkboxes__label govuk-!-font-size-16",
+    htmlFor: "scroll"
+  }, "Scroll automatically to a new message")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-button-group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    id: "settings-save",
+    href: "#",
+    className: "govuk-button govuk-!-font-size-16",
+    "data-module": "govuk-button",
+    onClick: onSave
+  }, "Save"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    id: "settings-cancel",
+    href: "#",
+    className: "govuk-link govuk-!-font-size-16",
+    "data-module": "govuk-button",
+    onClick: onCancel
+  }, "Cancel"))));
+}
+
+/***/ }),
+
 /***/ "./src/client/components/screens/unavailable.jsx":
 /*!*******************************************************!*\
   !*** ./src/client/components/screens/unavailable.jsx ***!
@@ -1023,6 +1125,44 @@ const classnames = (...classes) => classes.filter(classname => classname && type
 
 /***/ }),
 
+/***/ "./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);
+    });
+  }
+  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/transform-messages.js":
 /*!**********************************************!*\
   !*** ./src/client/lib/transform-messages.js ***!
@@ -1037,17 +1177,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var uuid__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! uuid */ "uuid");
 /* harmony import */ var uuid__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(uuid__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var sanitize_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! sanitize-html */ "sanitize-html");
-/* harmony import */ var sanitize_html__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(sanitize_html__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var luxon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! luxon */ "luxon");
-/* harmony import */ var luxon__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(luxon__WEBPACK_IMPORTED_MODULE_2__);
-
+/* harmony import */ var luxon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! luxon */ "luxon");
+/* harmony import */ var luxon__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(luxon__WEBPACK_IMPORTED_MODULE_1__);
 
 
 const transformMessage = message => {
   return {
     id: message.id,
-    text: sanitize_html__WEBPACK_IMPORTED_MODULE_1___default()(message.messageContent?.text),
+    text: message.messageContent?.text,
     createdAt: new Date(message.createdAt),
     user: message.authorEndUserIdentity?.fullName?.trim() || null,
     assignee: message.authorUser?.firstName || null,
@@ -1056,7 +1193,7 @@ const transformMessage = message => {
 };
 const transformMessages = messages => messages.map(message => transformMessage(message));
 const formatTranscript = messages => {
-  const now = luxon__WEBPACK_IMPORTED_MODULE_2__.DateTime.local();
+  const now = luxon__WEBPACK_IMPORTED_MODULE_1__.DateTime.local();
   now.setZone('Europe/London');
   let string = `Floodline webchat transcript, ${now.toFormat('HH:mm:ss a, dd LLLL yyyy')}, (ID: ${uuid__WEBPACK_IMPORTED_MODULE_0__.v4().split('-')[0]})\n\n`;
   for (const message of messages) {
@@ -1068,7 +1205,7 @@ const formatTranscript = messages => {
       createdAt
     } = message;
     const author = direction === 'inbound' ? user : `${assignee} (Floodline adviser)`;
-    const date = luxon__WEBPACK_IMPORTED_MODULE_2__.DateTime.fromJSDate(new Date(createdAt)).setZone('Europe/London').toFormat('HH:mm:ss a, dd LLLL yyyy');
+    const date = luxon__WEBPACK_IMPORTED_MODULE_1__.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, '');
@@ -1092,17 +1229,23 @@ __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 _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 _reducer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reducer.js */ "./src/client/store/reducer.js");
+/* 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_2__.initialState);
+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_2__.reducer, _reducer_js__WEBPACK_IMPORTED_MODULE_2__.initialState);
+  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
@@ -1156,6 +1299,10 @@ const AppProvider = ({
       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();
+    }
   };
   const onContactStatusChanged = e => {
     dispatch({
@@ -1180,8 +1327,9 @@ const AppProvider = ({
       type: 'SET_AVAILABILITY',
       payload: availability
     });
-    setCustomerId(window.localStorage.getItem(_reducer_js__WEBPACK_IMPORTED_MODULE_2__.CUSTOMER_ID_STORAGE_KEY));
-    setThreadId(window.localStorage.getItem(_reducer_js__WEBPACK_IMPORTED_MODULE_2__.THREAD_ID_STORAGE_KEY));
+    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);
     if (window.location.hash === '#webchat') {
       setChatVisibility(true);
     }
@@ -1223,6 +1371,12 @@ const AppProvider = ({
       payload: messages
     });
   };
+  const setSettings = data => {
+    dispatch({
+      type: 'SET_SETTINGS',
+      payload: data
+    });
+  };
   const setUnseenCount = unseenCount => {
     dispatch({
       type: 'SET_UNSEEN_COUNT',
@@ -1236,6 +1390,7 @@ const AppProvider = ({
   const store = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({
     ...state,
     sdk,
+    setSettings,
     setCustomerId,
     setThreadId,
     setThread,
@@ -1267,14 +1422,25 @@ __webpack_require__.r(__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 _reducer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reducer */ "./src/client/store/reducer.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(_reducer__WEBPACK_IMPORTED_MODULE_1__.CUSTOMER_ID_STORAGE_KEY, payload);
+    window.localStorage.setItem(_constants__WEBPACK_IMPORTED_MODULE_1__.CUSTOMER_ID_STORAGE_KEY, payload);
   } else {
-    window.localStorage.removeItem(_reducer__WEBPACK_IMPORTED_MODULE_1__.CUSTOMER_ID_STORAGE_KEY);
+    window.localStorage.removeItem(_constants__WEBPACK_IMPORTED_MODULE_1__.CUSTOMER_ID_STORAGE_KEY);
   }
   return {
     ...state,
@@ -1283,9 +1449,9 @@ const setCustomerId = (state, payload) => {
 };
 const setThreadId = (state, payload) => {
   if (payload) {
-    window.localStorage.setItem(_reducer__WEBPACK_IMPORTED_MODULE_1__.THREAD_ID_STORAGE_KEY, payload);
+    window.localStorage.setItem(_constants__WEBPACK_IMPORTED_MODULE_1__.THREAD_ID_STORAGE_KEY, payload);
   } else {
-    window.localStorage.removeItem(_reducer__WEBPACK_IMPORTED_MODULE_1__.THREAD_ID_STORAGE_KEY);
+    window.localStorage.removeItem(_constants__WEBPACK_IMPORTED_MODULE_1__.THREAD_ID_STORAGE_KEY);
   }
   return {
     ...state,
@@ -1349,6 +1515,7 @@ const setUnseenCount = (state, payload) => {
 const actionsMap = {
   SET_CHAT_VISIBILITY: setChatVisibility,
   SET_AVAILABILITY: setAvailability,
+  SET_SETTINGS: setSettings,
   SET_CUSTOMER_ID: setCustomerId,
   SET_THREAD_ID: setThreadId,
   SET_THREAD: setThread,
@@ -1362,6 +1529,24 @@ const actionsMap = {
 
 /***/ }),
 
+/***/ "./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 ***!
@@ -1370,15 +1555,11 @@ const actionsMap = {
 
 __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 */   THREAD_ID_STORAGE_KEY: () => (/* binding */ THREAD_ID_STORAGE_KEY),
 /* 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 CUSTOMER_ID_STORAGE_KEY = 'webchat_customer_id';
-const THREAD_ID_STORAGE_KEY = 'webchat_thread_id';
 const initialState = {
   availability: null,
   customerId: null,
@@ -1389,7 +1570,11 @@ const initialState = {
   agent: null,
   agentStatus: null,
   isAgentTyping: false,
-  isChatOpen: false
+  isChatOpen: false,
+  settings: {
+    audio: true,
+    scroll: true
+  }
 };
 const reducer = (state, action) => {
   const {
@@ -1521,16 +1706,6 @@ module.exports = require("react-dom/client");
 
 /***/ }),
 
-/***/ "sanitize-html":
-/*!********************************!*\
-  !*** external "sanitize-html" ***!
-  \********************************/
-/***/ ((module) => {
-
-module.exports = require("sanitize-html");
-
-/***/ }),
-
 /***/ "uuid":
 /*!***********************!*\
   !*** external "uuid" ***!
@@ -1628,7 +1803,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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_reducer_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./store/reducer.js */ "./src/client/store/reducer.js");
+/* harmony import */ var _store_constants_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./store/constants.js */ "./src/client/store/constants.js");
 
 
 
@@ -1640,7 +1815,7 @@ 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_reducer_js__WEBPACK_IMPORTED_MODULE_6__.CUSTOMER_ID_STORAGE_KEY) || '',
+    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);
@@ -1653,10 +1828,9 @@ async function init(container, options) {
   }
   root.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_store_AppProvider_jsx__WEBPACK_IMPORTED_MODULE_5__.AppProvider, {
     sdk: sdk,
-    availability: availability
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_availability_availability_jsx__WEBPACK_IMPORTED_MODULE_3__.Availability, {
-    availability: availability
-  })));
+    availability: availability,
+    options: options
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_availability_availability_jsx__WEBPACK_IMPORTED_MODULE_3__.Availability, null)));
 }
 })();