@defra/flood-webchat 1.0.10 → 1.0.12

package/src/client/components/panel/panel.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react'
 import { createPortal } from 'react-dom'
-
 import { classnames } from '../../lib/classnames.js'
+
 import { PreChat } from '../screens/pre-chat.jsx'
 import { RequestChat } from '../screens/request-chat.jsx'
 import { Chat } from '../chat/chat.jsx'
@@ -11,17 +11,18 @@ import { Settings } from '../screens/settings.jsx'
 import { Feedback } from '../screens/feedback.jsx'
 import { LiveRegion } from '../live-region.jsx'
 
-import { useApp } from '../../store/app/useApp.js'
+import { useApp } from '../../store/useApp.js'
+import { useChatSdk } from '../../store/useChatSdk.js'
 import { useFocusedElements } from '../../hooks/useFocusedElements.js'
 import { historyReplaceState } from '../../lib/history.js'
-import { SdkProvider } from '../../store/sdk/SdkProvider.jsx'
 
-export function Panel ({ initSdk, playSound }) {
-  const { sdk, thread, availability, instigatorId, threadId, setSdk, setChatVisibility, setUnseenCount, isMobile, isKeyboard, isChatOpen } = useApp()
+export function Panel () {
+  const { sdk, availability, instigatorId, thread, threadId, setThread, setThreadId, setChatVisibility, setMessages, setUnseenCount, isMobile, isKeyboard } = useApp()
+  const { fetchThread, fetchMessages } = useChatSdk(sdk)
 
   const [screen, setScreen] = useState(threadId ? 2 : 0)
 
-  useFocusedElements(screen, isChatOpen)
+  useFocusedElements(screen)
 
   const onEscapeKey = useCallback(e => {
     if (e.key === 'Escape' || e.key === 'Esc') {
@@ -38,19 +39,18 @@ export function Panel ({ initSdk, playSound }) {
    * Focus previously focused element when closing the webchat
    */
   useEffect(() => {
-    if (!isChatOpen) {
+    return () => {
       document.getElementById(instigatorId)?.focus()
     }
-  }, [isChatOpen])
+  }, [])
 
   /**
-   * We need ammend classes on the body element to handle mobile behaviour
-   */
+  * We need ammend classes on the body element to handle mobile behaviour
+  */
   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')
@@ -69,15 +69,33 @@ export function Panel ({ initSdk, playSound }) {
   }, [onEscapeKey, setChatVisibility])
 
   /**
-   * Initialize SDK if theres a thread ID
+   * Recovers the thread if there is a threadId but no thread loaded in to state
    */
   useEffect(() => {
-    if (threadId) {
-      if (!thread) {
-        setSdk(initSdk())
+    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)
       }
+    }
 
-      setScreen(2)
+    if (threadId) {
+      if (thread) {
+        thread.lastMessageSeen()
+        setUnseenCount(0)
+        setScreen(2)
+      } else {
+        recover()
+      }
     }
   }, [thread, threadId])
 
@@ -100,38 +118,25 @@ export function Panel ({ initSdk, playSound }) {
       ScreenComponent = <PreChat onContinue={goToRequestChatScreen} />
       break
     case 1:
-      ScreenComponent = <RequestChat initSdk={initSdk} onPreChatScreen={goToPreChatScreen} />
+      ScreenComponent = <RequestChat onPreChatScreen={goToPreChatScreen} />
       break
     case 2:
-      ScreenComponent = (
-        <SdkProvider sdk={sdk} playSound={playSound} onRecoverError={() => setScreen(0)}>
-          <Chat onSettingsScreen={goToSettingsScreen} onEndChatScreen={goToEndChatScreen} />
-        </SdkProvider>
-      )
+      ScreenComponent = <Chat onSettingsScreen={goToSettingsScreen} onEndChatScreen={goToEndChatScreen} />
       break
     case 3:
-      ScreenComponent = (
-        <SdkProvider sdk={sdk} playSound={playSound}>
-          <EndChat onChatScreen={goToChatScreen} onEndChatConfirm={goToFeedbackScreen} />
-        </SdkProvider>
-      )
+      ScreenComponent = <EndChat onChatScreen={goToChatScreen} onEndChatConfirm={goToFeedbackScreen} />
       break
     case 4:
       ScreenComponent = (
         <Feedback onCancel={() => {
           setChatVisibility(false)
           historyReplaceState()
-          setScreen(0)
         }}
         />
       )
       break
     case 5:
-      ScreenComponent = (
-        <SdkProvider sdk={sdk} playSound={playSound}>
-          <Settings onCancel={goToChatScreen} />
-        </SdkProvider>
-      )
+      ScreenComponent = <Settings onCancel={goToChatScreen} />
       break
     default:
       ScreenComponent = <PreChat onContinue={goToRequestChatScreen} />
@@ -142,7 +147,7 @@ export function Panel ({ initSdk, playSound }) {
   }
 
   const Component = (
-    <div id='wc-panel' role='dialog' style={{ display: isChatOpen ? 'flex' : 'none' }} className={classnames('wc-panel', isKeyboard && 'wc-focus-visible')} tabIndex='-1' aria-modal='true' aria-labelledby='wc-header wc-subtitle' open={isChatOpen}>
+    <div id='wc-panel' role='dialog' className={classnames('wc-panel', isKeyboard && 'wc-focus-visible')} tabIndex='-1' aria-modal='true' aria-labelledby='wc-header wc-subtitle'>
       <div className='wc-panel__inner'>
         {ScreenComponent}
       </div>

package/src/client/components/panel/panel.scss

@@ -53,7 +53,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: govuk-colour('black');
+  background-color: govuk-colour('blue');
   border-bottom: 1px solid govuk-colour('black');
   padding: 3px;
 

package/src/client/components/screens/end-chat.jsx

@@ -1,21 +1,18 @@
 import React, { useEffect } from 'react'
 import { PanelHeader } from '../panel/panel-header.jsx'
-import { useApp } from '../../store/app/useApp.js'
-import { useSdk } from '../../store/sdk/useSdk.js'
+import { useApp } from '../../store/useApp.js'
 
 export function EndChat ({ onChatScreen, onEndChatConfirm }) {
-  const { thread, setSdk, setCustomerId, setThreadId, threadId, setUnseenCount, isKeyboard } = useApp()
-  const { agentStatus, setMessages } = useSdk()
+  const { setCustomerId, setThreadId, setMessages, agentStatus, thread, threadId, setUnseenCount, isKeyboard } = useApp()
 
   const confirmEndChat = async e => {
     e.preventDefault()
 
     window.localStorage.setItem('tmpThreadId', threadId)
-    thread?.lastMessageSeen()
-    setSdk()
     setThreadId()
     setMessages([])
     setCustomerId()
+    thread.lastMessageSeen()
     setUnseenCount(0)
 
     // End chat if still open

package/src/client/components/screens/request-chat.jsx

@@ -3,14 +3,15 @@ import * as uuid from 'uuid'
 
 import { classnames } from '../../lib/classnames.js'
 import { PanelHeader } from '../panel/panel-header.jsx'
-import { useApp } from '../../store/app/useApp.js'
+import { useApp } from '../../store/useApp.js'
+import { useChatSdk } from '../../store/useChatSdk.js'
 import { ErrorSummary } from '../errorSummary/error-summary.jsx'
 
 const QUESTION_MAX_LENGTH = 500
 
-export function RequestChat ({ initSdk, onPreChatScreen }) {
-  const { setSdk, setCustomerId, setThreadId, setThread, setLiveRegionText } = useApp()
-
+export function RequestChat ({ onPreChatScreen }) {
+  const { sdk, setCustomerId, setThreadId, setThread, setLiveRegionText } = useApp()
+  const { fetchCustomerId, fetchThread } = useChatSdk(sdk)
   const [errors, setErrors] = useState({})
   const [questionLength, setQuestionLength] = useState(0)
   const [isButtonDisabled, setButtonDisabled] = useState(false)
@@ -71,22 +72,17 @@ export function RequestChat ({ initSdk, onPreChatScreen }) {
       try {
         setButtonDisabled(true)
         const threadId = uuid.v4()
+        const customerId = await fetchCustomerId()
+        const thread = await fetchThread(threadId)
 
-        const sdk = initSdk()
-        const conn = await sdk.authorize()
-        const customerId = conn?.consumerIdentity.idOnExternalPlatform
-
-        const thread = await sdk.getThread(threadId)
-        thread.setCustomField('threadid', threadId)
-
-        await sdk.getCustomer().setName(nameRef.current.value)
+        sdk.getCustomer().setName(nameRef.current.value)
 
         await thread.startChat(questionRef.current.value || 'Begin conversation')
 
-        setSdk(sdk)
         setCustomerId(customerId)
         setThreadId(threadId)
         setThread(thread)
+        thread.setCustomField('threadid', threadId)
       } catch (err) {
         console.log('[Request chat Error]', err)
       }

package/src/client/components/screens/settings.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { PanelHeader } from '../panel/panel-header.jsx'
 
-import { useApp } from '../../store/app/useApp.js'
+import { useApp } from '../../store/useApp.js'
 
 export function Settings ({ onCancel }) {
   const { settings, setSettings } = useApp()

package/src/client/components/screens/unavailable.jsx

@@ -7,18 +7,16 @@ export function Unavailable () {
       <PanelHeader />
 
       <div className='wc-body'>
-        <div className='wc-content'>
-          <h3 id='wc-subtitle' className='govuk-heading-m'>Webchat is currently not available</h3>
-          <p className='govuk-body-s'>Try again later, or call Floodline:</p>
-          <p className='govuk-body-s'>
-            <strong>Floodline helpline</strong>
-            <br />Telephone: 0345 988 1188
-            <br />Textphone: 0345 602 6340
-            <br />Open 24 hours a day, 7 days a week
-            <br /><a className='govuk-link' href='https://gov.uk/call-charges'>Find out more about call charges</a>
-          </p>
-          <p className='govuk-body-s'>We're running webchat as a trial, it will not always be available.</p>
-        </div>
+        <h3 id='wc-subtitle' className='govuk-heading-m'>Webchat is currently not available</h3>
+        <p className='govuk-body-s'>Try again later, or call Floodline:</p>
+        <p className='govuk-body-s'>
+          <strong>Floodline helpline</strong>
+          <br />Telephone: 0345 988 1188
+          <br />Textphone: 0345 602 6340
+          <br />Open 24 hours a day, 7 days a week
+          <br /><a className='govuk-link' href='https://gov.uk/call-charges'>Find out more about call charges</a>
+        </p>
+        <p className='govuk-body-s'>We're running webchat as a trial, it will not always be available.</p>
       </div>
     </>
   )

package/src/client/components/skip-link.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { createPortal } from 'react-dom'
-import { useApp } from '../store/app/useApp'
+import { useApp } from '../store/useApp'
 
 export const SkipLink = () => {
   const { threadId, setInstigatorId } = useApp()

package/src/client/hooks/useFocusedElements.js

@@ -32,7 +32,7 @@ export const getFocusableElements = () => {
   return Array.from(elements).filter(e => !e.closest('[hidden]') && !e.closest('[aria-hidden="true"]'))
 }
 
-const useFocusedElements = (screen, isChatOpen) => {
+const useFocusedElements = screen => {
   const [panelElements, setPanelElements] = useState([])
 
   const onKeyDown = useCallback(e => {
@@ -63,20 +63,18 @@ const useFocusedElements = (screen, isChatOpen) => {
   }, [screen])
 
   useEffect(() => {
-    if (isChatOpen) {
-      setAriaHidden(true)
+    setAriaHidden(true)
 
-      const panelElement = document.querySelector('#wc-panel')
-      panelElement.focus()
+    const panelElement = document.querySelector('#wc-panel')
+    panelElement.focus()
 
-      document.addEventListener('keydown', onKeyDown)
-    }
+    document.addEventListener('keydown', onKeyDown)
 
     return () => {
       setAriaHidden()
       document.removeEventListener('keydown', onKeyDown)
     }
-  }, [panelElements, isChatOpen])
+  }, [panelElements])
 }
 
 export { useFocusedElements }

package/src/client/index.jsx

@@ -3,44 +3,31 @@ import { createRoot } from 'react-dom/client'
 import { ChatSdk } from '@nice-devone/nice-cxone-chat-web-sdk'
 import { Availability } from './components/availability/availability.jsx'
 import { checkAvailability } from './lib/check-availability'
-import { AppProvider } from './store/app/AppProvider.jsx'
+import { AppProvider } from './store/AppProvider.jsx'
 import { CUSTOMER_ID_STORAGE_KEY } from './store/constants.js'
 import { messageNotification } from './lib/message-notification.js'
-import { SkipLink } from './components/skip-link.jsx'
-import { Panel } from './components/panel/panel.jsx'
 
 export async function init (container, options) {
-  const root = createRoot(container)
-
-  const initSdk = () => {
-    return new ChatSdk({
-      brandId: options.brandId,
-      channelId: options.channelId,
-      customerId: window.localStorage.getItem(CUSTOMER_ID_STORAGE_KEY) || '',
-      environment: options.environment,
-      onError: error => {
-        console.log('ChatSdk onError', error)
-      }
-    })
-  }
+  const sdk = new ChatSdk({
+    brandId: options.brandId,
+    channelId: options.channelId,
+    customerId: window.localStorage.getItem(CUSTOMER_ID_STORAGE_KEY) || '',
+    environment: options.environment
+  })
 
+  const root = createRoot(container)
   let availability
   let playSound
-
   try {
     const result = await checkAvailability(options.availabilityEndpoint)
-
     playSound = await messageNotification(options.audioUrl)
     availability = result.availability
   } catch (e) {
     availability = 'UNAVAILABLE'
   }
-
   root.render(
-    <AppProvider availability={availability}>
+    <AppProvider sdk={sdk} availability={availability} playSound={playSound}>
       <Availability />
-      <SkipLink />
-      <Panel initSdk={initSdk} playSound={playSound} />
     </AppProvider>
   )
 }

package/src/client/lib/history.js

@@ -1,8 +1,5 @@
-const { stripPageTitle } = require('../../server/lib/utils')
-
 export const historyPushState = () => {
   const url = window.location.href.split('#')[0]
-  document.title = stripPageTitle(document.title)
   window.history.pushState({ history: true }, null, `${url}#webchat`)
 }
 
@@ -11,7 +8,6 @@ export const historyReplaceState = () => {
     return window.history.back()
   }
 
-  document.title = stripPageTitle(document.title)
   const url = window.location.href.split('#')[0]
   return window.history.replaceState(null, null, url)
 }

package/src/client/store/{app/AppProvider.jsx → AppProvider.jsx}

@@ -1,14 +1,84 @@
 import React, { createContext, useEffect, useReducer, useMemo } from 'react'
-// import { ChatEvent } from '@nice-devone/nice-cxone-chat-web-sdk'
+import { ChatEvent } from '@nice-devone/nice-cxone-chat-web-sdk'
 
 import { initialState, reducer } from './reducer.js'
-import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY, SETTINGS_STORAGE_KEY, MESSAGES_UNSEEN_COUNT } from '../constants.js'
+import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY, SETTINGS_STORAGE_KEY } from './constants.js'
 
 export const AppContext = createContext(initialState)
 
-export const AppProvider = ({ availability, children }) => {
+export const AppProvider = ({ sdk, availability, playSound, children }) => {
   const [state, dispatch] = useReducer(reducer, initialState)
 
+  /**
+   * 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 })
+    dispatch({ type: 'SET_LIVE_REGION_TEXT' })
+  }
+
+  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(SETTINGS_STORAGE_KEY)).audio
+
+    if (isAudioOn && e.detail.data.message.direction === 'outbound' && playSound) {
+      playSound()
+    }
+  }
+
+  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 })
+  }
+
+  useEffect(() => {
+    sdk.onChatEvent(ChatEvent.LIVECHAT_RECOVERED, onLiveChatRecovered)
+    sdk.onChatEvent(ChatEvent.MESSAGE_CREATED, onMessageCreated)
+    sdk.onChatEvent(ChatEvent.AGENT_TYPING_STARTED, onAgentTypingStarted)
+    sdk.onChatEvent(ChatEvent.AGENT_TYPING_ENDED, onAgentTypingEnded)
+    sdk.onChatEvent(ChatEvent.ASSIGNED_AGENT_CHANGED, onAssignedAgentChanged)
+    sdk.onChatEvent(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
    */
@@ -18,7 +88,6 @@ export const AppProvider = ({ availability, children }) => {
     setCustomerId(window.localStorage.getItem(CUSTOMER_ID_STORAGE_KEY))
     setThreadId(window.localStorage.getItem(THREAD_ID_STORAGE_KEY))
     setSettings(JSON.parse(window.localStorage.getItem(SETTINGS_STORAGE_KEY)) || state.settings)
-    setUnseenCount(window.localStorage.getItem(MESSAGES_UNSEEN_COUNT))
   }, [])
 
   /**
@@ -44,38 +113,9 @@ export const AppProvider = ({ availability, children }) => {
     }
   }, [])
 
-  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 })
-  }
-
-  useEffect(() => {
-    // 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)
-
-    return () => {
-      window.removeEventListener('change', onMatchMedia)
-      window.removeEventListener('keydown', onKeydown)
-      window.removeEventListener('pointerdown', onPointerdown)
-    }
-  }, [])
-
   /**
    * State update functions
    */
-  const setSdk = payload => {
-    dispatch({ type: 'SET_SDK', payload })
-  }
-
   const setChatVisibility = payload => {
     dispatch({ type: 'SET_CHAT_VISIBILITY', payload })
   }
@@ -92,6 +132,10 @@ export const AppProvider = ({ availability, children }) => {
     dispatch({ type: 'SET_THREAD', payload: thread })
   }
 
+  const setMessages = messages => {
+    dispatch({ type: 'SET_MESSAGES', payload: messages })
+  }
+
   const setSettings = data => {
     dispatch({ type: 'SET_SETTINGS', payload: data })
   }
@@ -113,15 +157,22 @@ export const AppProvider = ({ availability, children }) => {
    */
   const store = useMemo(() => ({
     ...state,
-    setSdk,
+    sdk,
     setSettings,
     setCustomerId,
     setThreadId,
     setThread,
+    setMessages,
     setUnseenCount,
     setChatVisibility,
     setInstigatorId,
-    setLiveRegionText
+    setLiveRegionText,
+    onLiveChatRecovered,
+    onAssignedAgentChanged,
+    onAgentTypingStarted,
+    onAgentTypingEnded,
+    onMessageCreated,
+    onContactStatusChanged
   }))
 
   return (

package/src/client/store/{app/actions-map.js → actions-map.js}

@@ -1,11 +1,5 @@
-import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY, SETTINGS_STORAGE_KEY, MESSAGES_UNSEEN_COUNT } from '../constants'
-
-const setSdk = (state, payload) => {
-  return {
-    ...state,
-    sdk: payload
-  }
-}
+import { transformMessages, transformMessage } from '../lib/transform-messages'
+import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY, SETTINGS_STORAGE_KEY } from './constants'
 
 const setSettings = (state, payload) => {
   if (payload) {
@@ -46,6 +40,20 @@ const setThreadId = (state, payload) => {
   }
 }
 
+const setChatVisibility = (state, payload) => {
+  return {
+    ...state,
+    isChatOpen: payload
+  }
+}
+
+const setAvailability = (state, payload) => {
+  return {
+    ...state,
+    availability: payload
+  }
+}
+
 const setThread = (state, payload) => {
   return {
     ...state,
@@ -53,22 +61,43 @@ const setThread = (state, payload) => {
   }
 }
 
-const setChatVisibility = (state, payload) => {
+const setMessages = (state, payload) => {
   return {
     ...state,
-    isChatOpen: payload
+    messages: transformMessages(payload).reverse()
   }
 }
 
-const setAvailability = (state, payload) => {
+const setMessage = (state, payload) => {
   return {
     ...state,
-    availability: payload
+    message: transformMessage(payload),
+    messages: [...state.messages, transformMessage(payload)]
+  }
+}
+
+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) => {
-  window.localStorage.setItem(MESSAGES_UNSEEN_COUNT, payload)
   return {
     ...state,
     unseenCount: payload
@@ -104,13 +133,17 @@ const toggleIsKeyboard = (state, payload) => {
 }
 
 export const actionsMap = {
-  SET_SDK: setSdk,
-  SET_THREAD: setThread,
   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,
   SET_LIVE_REGION_TEXT: setLiveRegionText,

package/src/client/store/constants.js

@@ -2,4 +2,3 @@ export const SETTINGS_STORAGE_KEY = 'webchat_settings'
 export const CUSTOMER_ID_STORAGE_KEY = 'webchat_customer_id'
 export const THREAD_ID_STORAGE_KEY = 'webchat_thread_id'
 export const TYPING_INDICATOR_DURATION = 4000
-export const MESSAGES_UNSEEN_COUNT = 'message_unseen_count'