@defra/flood-webchat 0.0.1-beta.37 → 0.0.1-beta.38-draft

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/flood-webchat",
-  "version": "0.0.1-beta.37",
+  "version": "0.0.1-beta.38-draft",
   "description": "",
   "main": "dist/server.js",
   "browser": "dist/client.js",
@@ -62,6 +62,7 @@
     "@nice-devone/nice-cxone-chat-web-sdk": "^1.3.0",
     "axios": "^1.5.0",
     "jwt-decode": "^3.1.2",
+    "lodash.debounce": "^4.0.8",
     "luxon": "^3.4.3",
     "querystring": "^0.2.1",
     "react": "^18.2.0",

package/src/client/components/availability/availability.jsx

@@ -6,9 +6,10 @@ import { SkipLink } from '../skip-link.jsx'
 
 import { useApp } from '../../store/useApp'
 import { historyPushState, historyReplaceState } from '../../lib/history.js'
+import { LiveRegion } from '../live-region.jsx'
 
 export function Availability () {
-  const { availability, isChatOpen, setChatVisibility, unseenCount, threadId, setUnseenCount, setInstigatorId } = useApp()
+  const { availability, isChatOpen, setChatVisibility, unseenCount, threadId, setUnseenCount, setInstigatorId, setLiveRegionText } = useApp()
 
   const buttonRef = useRef()
 
@@ -38,6 +39,16 @@ export function Availability () {
     }
   }
 
+  useEffect(() => {
+    if (!isChatOpen && unseenCount > 0) {
+      setLiveRegionText(`Floodline Webchat - ${unseenCount} new messages`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [unseenCount, isChatOpen])
+
   useEffect(() => {
     const onScroll = () => {
       if (!threadId) {
@@ -93,7 +104,14 @@ export function Availability () {
                 data-module='govuk-button'
               >
                 {TextComponent}
-                {unseenCount > 0 && !isChatOpen ? <span className='wc-availability__unseen'>{unseenCount}</span> : null}
+                {unseenCount > 0 && !isChatOpen
+                  ? (
+                    <>
+                      <span className='wc-availability__unseen'>{unseenCount}</span>
+                      <LiveRegion />
+                    </>
+                    )
+                  : null}
               </a>
             </div>
           </div>

package/src/client/components/chat/chat.jsx

@@ -7,9 +7,10 @@ import { Message } from '../message/message.jsx'
 import { useApp } from '../../store/useApp.js'
 import { useTextareaAutosize } from '../../hooks/useTextareaAutosize.js'
 import { formatTranscript } from '../../lib/transform-messages.js'
+import { agentStatusHeadline } from '../../lib/agent-status-headline.js'
 
 export function Chat ({ onEndChatScreen, onSettingsScreen }) {
-  const { availability, thread, messages, agent, agentStatus, isAgentTyping, settings, isKeyboard } = useApp()
+  const { availability, thread, messages, agent, agentStatus, isAgentTyping, isChatOpen, settings, isKeyboard, setLiveRegionText } = useApp()
 
   const [userMessage, setUserMessage] = useState('')
   const [focusVisibleWithin, setFocusVisibleWithin] = useState(false)
@@ -41,21 +42,39 @@ export function Chat ({ onEndChatScreen, onSettingsScreen }) {
 
   const agentName = agent?.nickname || agent?.firstName
 
-  let connectionHeadlineText = 'Connecting to Floodline'
+  const connectionHeadlineText = agentStatusHeadline(availability, agentStatus, agentName)
 
-  if (agentStatus === 'closed') {
-    connectionHeadlineText = agentName ? `${agentName} ended the session` : 'Session ended by advisor'
-  } else if (agentStatus) {
-    if (agentName) {
-      connectionHeadlineText = `You are speaking with ${agentName}`
-    } else {
-      connectionHeadlineText = 'No advisers currently available'
+  useEffect(() => {
+    if (connectionHeadlineText) {
+      setLiveRegionText(`Floodline Webchat - ${connectionHeadlineText}`)
     }
-  }
 
-  if (availability === 'UNAVAILABLE') {
-    connectionHeadlineText = 'Webchat is not currently available'
-  }
+    return () => {
+      setLiveRegionText()
+    }
+  }, [connectionHeadlineText])
+
+  useEffect(() => {
+    if (isAgentTyping && isChatOpen) {
+      setLiveRegionText(`${agentName} is typing...`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [isAgentTyping, isChatOpen])
+
+  useEffect(() => {
+    const lastAgentMessage = messages[messages.length - 1]
+
+    if (lastAgentMessage?.direction === 'outbound') {
+      setLiveRegionText(`${agentName} said: ${lastAgentMessage.text}`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [messages])
 
   const sendMessage = () => {
     if (messageRef.current.value.length === 0) {
@@ -63,7 +82,9 @@ export function Chat ({ onEndChatScreen, onSettingsScreen }) {
     }
 
     try {
-      thread.sendTextMessage(messageRef.current.value.trim())
+      const message = messageRef.current.value.trim()
+      thread.sendTextMessage(message)
+      setLiveRegionText(`You said: ${message}`)
     } catch (err) {
       console.log('[Chat Error] sendMessage', err)
     }

package/src/client/components/live-region.jsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import debounce from 'lodash.debounce'
+import { useApp } from '../store/useApp'
+
+export const LiveRegion = () => {
+  const { agentStatus, liveRegionText, setLiveRegionText } = useApp()
+
+  const [textA, setTextA] = useState()
+  const [textB, setTextB] = useState()
+
+  const isSessionEnded = agentStatus === 'closed' || agentStatus === null
+
+  const clearText = () => {
+    setTextA()
+    setTextB()
+  }
+
+  const setText = useCallback(debounce(text => {
+    if (textA) {
+      setTextB(text)
+    } else {
+      setTextA(text)
+    }
+  }, 2000), [textA, textB])
+
+  useEffect(() => {
+    console.log('liveRegionText', liveRegionText)
+
+    if (liveRegionText) {
+      clearText()
+      setText(liveRegionText)
+    }
+
+    if (isSessionEnded) {
+      clearText()
+      setLiveRegionText()
+    }
+
+    return () => {
+      clearText()
+      setLiveRegionText()
+    }
+  }, [liveRegionText])
+
+  return (
+    <>
+      <div className='wc-live' aria-live='polite' aria-atomic='true'>
+        {textA}
+      </div>
+      <div className='wc-live' aria-live='polite' aria-atomic='true'>
+        {textB}
+      </div>
+    </>
+  )
+}

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

@@ -9,6 +9,7 @@ import { Unavailable } from '../screens/unavailable.jsx'
 import { EndChat } from '../screens/end-chat.jsx'
 import { Settings } from '../screens/settings.jsx'
 import { Feedback } from '../screens/feedback.jsx'
+import { LiveRegion } from '../live-region.jsx'
 
 import { useApp } from '../../store/useApp.js'
 import { useChatSdk } from '../../store/useChatSdk.js'
@@ -136,6 +137,7 @@ export function Panel () {
       <div className='wc-panel__inner'>
         {ScreenComponent}
       </div>
+      <LiveRegion />
     </div>
   )
 

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

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react'
 import { PanelHeader } from '../panel/panel-header.jsx'
 import { useApp } from '../../store/useApp.js'
+import { historyReplaceState } from '../../lib/history.js'
 
 export function EndChat ({ onChatScreen, onEndChatConfirm }) {
   const { setCustomerId, setThreadId, setMessages, agentStatus, thread, setUnseenCount, isKeyboard } = useApp()
@@ -19,6 +20,7 @@ export function EndChat ({ onChatScreen, onEndChatConfirm }) {
       thread.endChat()
     }
 
+    historyReplaceState()
     onEndChatConfirm(e)
   }
 

package/src/client/lib/agent-status-headline.js

@@ -0,0 +1,19 @@
+export const agentStatusHeadline = (availability, agentStatus, agentName) => {
+  let connectionHeadlineText = 'Connecting to Floodline'
+
+  if (agentStatus === 'closed') {
+    connectionHeadlineText = agentName ? `${agentName} ended the session` : 'Session ended by advisor'
+  } else if (agentStatus) {
+    if (agentName) {
+      connectionHeadlineText = `You are speaking with ${agentName}`
+    } else {
+      connectionHeadlineText = 'No advisers currently available'
+    }
+  }
+
+  if (availability === 'UNAVAILABLE') {
+    connectionHeadlineText = 'Webchat is not currently available'
+  }
+
+  return connectionHeadlineText
+}

package/src/client/scss/_settings.scss

@@ -73,3 +73,24 @@
     line-height: 1.25;
     margin: 0 0 25px;
 }
+
+// stylelint-disable declaration-no-important
+.wc-live {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+    border: 0 !important;
+    white-space: nowrap !important;
+
+    &::before,
+    &::after {
+        content: ' ';
+    }
+}
+// stylelint-enable declaration-no-important

package/src/client/store/AppProvider.jsx

@@ -27,12 +27,13 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
     dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
   }
 
-  const onAgentTypingStarted = () => {
+  const onAgentTypingStarted = e => {
     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 => {
@@ -149,6 +150,10 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
     dispatch({ type: 'SET_INSTIGATOR_ID', payload: id })
   }
 
+  const setLiveRegionText = text => {
+    dispatch({ type: 'SET_LIVE_REGION_TEXT', payload: text })
+  }
+
   /**
    * Application-wide state and state functions
    */
@@ -163,6 +168,7 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
     setUnseenCount,
     setChatVisibility,
     setInstigatorId,
+    setLiveRegionText,
     onLiveChatRecovered,
     onAssignedAgentChanged,
     onAgentTypingStarted,

package/src/client/store/actions-map.js

@@ -61,17 +61,18 @@ const setThread = (state, payload) => {
   }
 }
 
-const setMessage = (state, payload) => {
+const setMessages = (state, payload) => {
   return {
     ...state,
-    messages: [...state.messages, transformMessage(payload)]
+    messages: transformMessages(payload).reverse()
   }
 }
 
-const setMessages = (state, payload) => {
+const setMessage = (state, payload) => {
   return {
     ...state,
-    messages: transformMessages(payload).reverse()
+    message: transformMessage(payload),
+    messages: [...state.messages, transformMessage(payload)]
   }
 }
 
@@ -110,6 +111,13 @@ const setInstigatorId = (state, payload) => {
   }
 }
 
+const setLiveRegionText = (state, payload) => {
+  return {
+    ...state,
+    liveRegionText: payload
+  }
+}
+
 const toggleIsMobile = (state, payload) => {
   return {
     ...state,
@@ -138,6 +146,7 @@ export const actionsMap = {
   SET_AGENT_STATUS: setAgentStatus,
   SET_UNSEEN_COUNT: setUnseenCount,
   SET_INSTIGATOR_ID: setInstigatorId,
+  SET_LIVE_REGION_TEXT: setLiveRegionText,
   TOGGLE_IS_MOBILE: toggleIsMobile,
   TOGGLE_IS_KEYBOARD: toggleIsKeyboard
 }