@defra/flood-webchat 0.0.1-beta.16 → 0.0.1-beta.18

package/dist/client.js

@@ -26,7 +26,8 @@ function Availability() {
     availability,
     messages,
     isChatOpen,
-    setChatVisibility
+    setChatVisibility,
+    unseenCount
   } = (0,_store_useApp__WEBPACK_IMPORTED_MODULE_3__.useApp)();
   const [isFixed, setIsFixed] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   const buttonRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
@@ -84,7 +85,9 @@ function Availability() {
         onClick: onClick,
         onKeyUp: onKeyUp,
         onKeyDown: onKeyDown
-      }, TextComponent))), isChatOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_jsx__WEBPACK_IMPORTED_MODULE_2__.Panel, null));
+      }, TextComponent, unseenCount > 0 && !isChatOpen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+        className: "wc-open-btn__unseen"
+      }, unseenCount) : null))), isChatOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_jsx__WEBPACK_IMPORTED_MODULE_2__.Panel, null));
     case 'EXISTING':
     case 'UNAVAILABLE':
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
@@ -128,7 +131,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 function Chat({
-  onEndChat
+  onEndChat,
+  onSettings
 }) {
   const {
     availability,
@@ -136,13 +140,14 @@ function Chat({
     messages,
     agent,
     agentStatus,
-    isAgentTyping
+    isAgentTyping,
+    settings
   } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_5__.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,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;
     }
@@ -268,8 +273,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: onSettings
   }, "Settings"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "#",
     id: "transcript-download",
@@ -406,11 +413,14 @@ __webpack_require__.r(__webpack_exports__);
 function PanelHeader() {
   const {
     thread,
-    setChatVisibility
+    setChatVisibility,
+    setUnseenCount
   } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_1__.useApp)();
   const onClose = e => {
     e.preventDefault();
     setChatVisibility(false);
+    thread.lastMessageSeen();
+    setUnseenCount(0);
   };
   let ButtonComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     className: "wc-header__close",
@@ -471,9 +481,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");
+
 
 
 
@@ -493,14 +505,15 @@ function Panel() {
     setThread,
     setThreadId,
     setChatVisibility,
-    setMessages
-  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_7__.useApp)();
+    setMessages,
+    setUnseenCount
+  } = (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
@@ -530,7 +543,13 @@ function Panel() {
       }
     };
     if (threadId) {
-      thread ? setScreen(2) : recover();
+      if (thread) {
+        thread.lastMessageSeen();
+        setUnseenCount(0);
+        setScreen(2);
+      } else {
+        recover();
+      }
     }
   }, [thread, threadId]);
   const onEscapeKey = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => {
@@ -546,6 +565,7 @@ function Panel() {
   const onBack = handleScreenChange(screen - 1);
   const onEndChat = handleScreenChange(3);
   const onResume = handleScreenChange(2);
+  const onSettings = handleScreenChange(5);
   const onEndChatConfirm = e => {
     e.preventDefault();
     console.log('confirmed end chat');
@@ -564,7 +584,7 @@ function Panel() {
       break;
     case 2:
       ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_chat_chat_jsx__WEBPACK_IMPORTED_MODULE_4__.Chat, {
-        setScreen: setScreen,
+        onSettings: onSettings,
         onEndChat: onEndChat
       });
       break;
@@ -574,6 +594,11 @@ function Panel() {
         onEndChatConfirm: onEndChatConfirm
       });
       break;
+    case 5:
+      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_settings_jsx__WEBPACK_IMPORTED_MODULE_7__.Settings, {
+        onCancel: onResume
+      });
+      break;
     default:
       ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_pre_chat_jsx__WEBPACK_IMPORTED_MODULE_2__.PreChat, {
         onForward: onForward
@@ -584,8 +609,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"
@@ -850,6 +875,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 ***!
@@ -1011,6 +1127,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 ***!
@@ -1080,17 +1234,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
@@ -1104,6 +1264,10 @@ const AppProvider = ({
       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({
@@ -1136,6 +1300,14 @@ const AppProvider = ({
       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();
+    }
   };
   const onContactStatusChanged = e => {
     dispatch({
@@ -1160,8 +1332,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);
     }
@@ -1203,6 +1376,18 @@ const AppProvider = ({
       payload: messages
     });
   };
+  const setSettings = data => {
+    dispatch({
+      type: 'SET_SETTINGS',
+      payload: data
+    });
+  };
+  const setUnseenCount = unseenCount => {
+    dispatch({
+      type: 'SET_UNSEEN_COUNT',
+      payload: unseenCount
+    });
+  };
 
   /**
    * Application-wide state and state functions
@@ -1210,10 +1395,12 @@ const AppProvider = ({
   const store = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({
     ...state,
     sdk,
+    setSettings,
     setCustomerId,
     setThreadId,
     setThread,
     setMessages,
+    setUnseenCount,
     setChatVisibility,
     onLiveChatRecovered,
     onAssignedAgentChanged,
@@ -1240,14 +1427,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,
@@ -1256,9 +1454,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,
@@ -1313,9 +1511,16 @@ const setAgentStatus = (state, payload) => {
     agentStatus: payload
   };
 };
+const setUnseenCount = (state, payload) => {
+  return {
+    ...state,
+    unseenCount: payload
+  };
+};
 const actionsMap = {
   SET_CHAT_VISIBILITY: setChatVisibility,
   SET_AVAILABILITY: setAvailability,
+  SET_SETTINGS: setSettings,
   SET_CUSTOMER_ID: setCustomerId,
   SET_THREAD_ID: setThreadId,
   SET_THREAD: setThread,
@@ -1323,11 +1528,30 @@ const actionsMap = {
   SET_MESSAGES: setMessages,
   SET_AGENT: setAgent,
   SET_AGENT_TYPING: setAgentIsTyping,
-  SET_AGENT_STATUS: setAgentStatus
+  SET_AGENT_STATUS: setAgentStatus,
+  SET_UNSEEN_COUNT: setUnseenCount
 };
 
 /***/ }),
 
+/***/ "./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 ***!
@@ -1336,25 +1560,26 @@ 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,
   threadId: null,
   thread: null,
   messages: [],
+  unseenCount: 0,
   agent: null,
   agentStatus: null,
   isAgentTyping: false,
-  isChatOpen: false
+  isChatOpen: false,
+  settings: {
+    audio: true,
+    scroll: true
+  }
 };
 const reducer = (state, action) => {
   const {
@@ -1593,7 +1818,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");
 
 
 
@@ -1605,7 +1830,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);
@@ -1618,10 +1843,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)));
 }
 })();