@defra/flood-webchat 0.0.1-beta.8 → 1.0.1

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

@@ -1,73 +1,130 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
+
 import { classnames } from '../../lib/classnames'
-import { useMessageThread, useWebchatOpenState } from '../../lib/external-stores'
 import { Panel } from '../panel/panel.jsx'
+import { SkipLink } from '../skip-link.jsx'
+
+import { useApp } from '../../store/useApp'
+import { historyPushState, historyReplaceState } from '../../lib/history.js'
+import { LiveRegion } from '../live-region.jsx'
+
+const { stripPageTitle } = require('../../../server/lib/utils')
+
+export function Availability () {
+  const { availability, isChatOpen, setChatVisibility, unseenCount, threadId, setUnseenCount, setInstigatorId, setLiveRegionText } = useApp()
 
-export function Availability (props) {
-  const [isOpen, setOpen] = useWebchatOpenState()
-  const [isFixed, setFixed] = useState(false)
   const buttonRef = useRef()
-  const onClick = () => {
-    setOpen(!isOpen)
+
+  const messageText = unseenCount > 1 ? 'new messages' : 'new message'
+
+  const showUnseenCount = unseenCount > 0 && !isChatOpen
+
+  const originalTitle = stripPageTitle(document.title)
+
+  useEffect(() => {
+    if (showUnseenCount) {
+      document.title = `(${unseenCount} ${messageText}) - ${originalTitle}`
+    }
+  }, [unseenCount])
+
+  const onClick = e => {
+    e.preventDefault()
+    setUnseenCount(0)
+    setChatVisibility(!isChatOpen)
+    setInstigatorId(e.target.id)
+
+    if (!isChatOpen) {
+      historyPushState()
+    } else {
+      historyReplaceState()
+    }
   }
+
   const onKeyDown = event => {
     if (event.key === ' ') {
       event.preventDefault()
     }
   }
+
   const onKeyUp = event => {
     if (event.key === ' ') {
-      setOpen(!isOpen)
+      setUnseenCount(0)
+      setChatVisibility(!isChatOpen)
     }
   }
 
-  const intersectionCallback = entries => {
-    const [entry] = entries
-    const isBelowFold = !entry.isIntersecting && entry.boundingClientRect.top > 0
-    setFixed(!isOpen && isBelowFold)
-  }
-
   useEffect(() => {
-    const observer = new window.IntersectionObserver(intersectionCallback, {
-      rootMargin: '35px'
-    })
-    const parentElement = buttonRef.current?.parentElement
-    if (parentElement) {
-      observer.observe(parentElement)
+    if (showUnseenCount) {
+      setLiveRegionText(`Floodline webchat - ${unseenCount} ${messageText}`)
     }
+
     return () => {
-      if (parentElement) {
-        observer.unobserve(parentElement)
-      }
+      setLiveRegionText()
     }
-  }, [buttonRef, isOpen])
+  }, [unseenCount, isChatOpen])
 
   useEffect(() => {
-    document.documentElement.classList.toggle('wc-scroll-padding', isFixed)
-    document.body.classList.toggle('wc-scroll-padding', isFixed)
-  }, [isFixed])
+    const onScroll = () => {
+      if (!threadId) {
+        return
+      }
+
+      if (availability !== 'AVAILABLE') {
+        return
+      }
+
+      const rect = buttonRef.current.parentElement.getBoundingClientRect()
+
+      const isBelowFold = rect.top + 35 > (window.innerHeight || document.documentElement.clientHeight)
+      const isFixed = !isChatOpen && isBelowFold
+
+      document.documentElement.classList.toggle('wc-u-scroll-padding', isFixed)
+      document.body.classList.toggle('wc-u-scroll-padding', isFixed)
+      buttonRef.current.classList.toggle('wc-availability--fixed', isFixed)
+    }
+
+    document.addEventListener('scroll', onScroll)
+    onScroll()
 
-  switch (props.availability) {
+    return () => {
+      document.removeEventListener('scroll', onScroll)
+    }
+  }, [threadId, isChatOpen, availability])
+
+  switch (availability) {
     case 'AVAILABLE':
       return (
         <>
           <div
-            className={classnames('wc-availability', isFixed && 'wc-availability--fixed')}
+            className={classnames('wc-availability', isChatOpen && 'wc-open')}
             ref={buttonRef}
           >
             <div className='wc-availability__inner'>
               <a
+                id='webchat-start-chat-link'
                 className='wc-availability__link'
-                href='#webchat' role='button' draggable='false'
+                href='#webchat'
+                draggable='false'
                 onClick={onClick}
                 onKeyUp={onKeyUp}
                 onKeyDown={onKeyDown}
+                role='button'
+                data-module='govuk-button'
               >
-                <AvailabilityContent />
+                {!threadId ? <>Start chat</> : <>Show chat</>}
+                {showUnseenCount
+                  ? (
+                    <span className='wc-availability__unseen'>
+                      {unseenCount}
+                      <span className='govuk-visually-hidden'> {messageText}</span>
+                    </span>
+                    )
+                  : null}
               </a>
             </div>
           </div>
-          {isOpen && <Panel screenNumber={0} onClose={onClick} />}
+          {!isChatOpen ? <LiveRegion /> : <Panel />}
+          <SkipLink />
         </>
       )
     case 'EXISTING':
@@ -81,25 +138,3 @@ export function Availability (props) {
       )
   }
 }
-
-function AvailabilityContent () {
-  const [thread] = useMessageThread()
-  const unreadMessageCount = thread.filter(message => !message.read).length
-  if (!thread.length) {
-    return (
-      <>
-        Start Chat
-      </>
-    )
-  }
-  return (
-    <>
-      Show Chat {!!unreadMessageCount && (
-        <>
-          <span className='wc-availability__unseen'>{unreadMessageCount}</span>
-          <span className='govuk-visually-hidden'> {unreadMessageCount === 1 ? 'new message' : 'new messages'}</span>
-        </>
-    )}
-    </>
-  )
-}

package/src/client/components/availability/availability.scss

@@ -1,3 +1,8 @@
+// stylelint-disable selector-max-id
+#wc-availability {
+  margin-bottom: govuk-spacing(4);
+}
+// stylelint-enable selector-max-id
 
 .wc-availability__inner {
   max-width: 960px;
@@ -12,6 +17,10 @@
   right: 0;
   padding-left: 15px;
   padding-right: 15px;
+  border: 1px solid transparent;
+  @media (forced-colors: active) {
+    border-color: currentColor;
+  }
 
   @include mq ($from: 'tablet') {
     padding-left: 30px;
@@ -27,52 +36,31 @@
 }
 
 .wc-availability__link {
+  @extend %govuk-link;
+  display: inline-block;
   @include govuk-font($size: 19);
-  position:relative;
-  display:inline-block;
   margin-right: 5px;
-  margin-bottom: 0;
-  fill: govuk-colour('black');
 
-  @include mq ($from: tablet) {
-    margin-right: 10px;
+  &:visited:not(:hover):not(:focus) {
+    color: govuk-colour('blue');
   }
 
   .govuk-visually-hidden, .wc-availability__unseen {
     pointer-events: none;
   }
 
-  &:hover {
-    color: $govuk-link-hover-colour;
-  }
-
-  &:active {
-    color: govuk-colour('black');
-  }
-
-  &:visited {
-    color: $govuk-link-colour;
-  }
-
-  &:focus {
-    box-shadow: none;
-    background-color: transparent;
-    text-decoration: underline;
-    color: $govuk-focus-colour;
-  }
-
-  &:hover:not(:focus):not(:active) {
-    color: $govuk-link-hover-colour;
-
-    .wc-availability__unseen {
-      background-color: govuk-colour('dark-blue');
-    }
+  &:hover:not(:focus):not(:active) .wc-availability__unseen {
+    background-color: govuk-colour('dark-blue');
   }
 }
 
 .wc-availability__unseen {
   display: inline-block;
   position: relative;
+  border: 1px solid transparent;
+  @media (forced-colors: active) {
+    border-color: currentColor;
+  }
   border-radius: 10px;
   background-color: govuk-colour('black');
   color: govuk-colour('white');
@@ -86,4 +74,4 @@
     padding-left: 7px;
     padding-right: 7px;
   }
-}
+}

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

@@ -0,0 +1,239 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import { TYPING_INDICATOR_DURATION } from '../../store/constants.js'
+
+import { PanelHeader } from '../panel/panel-header.jsx'
+import { PanelFooter } from '../panel/panel-footer.jsx'
+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, isChatOpen, settings, isKeyboard, setLiveRegionText } = useApp()
+
+  const [userMessage, setUserMessage] = useState('')
+  const [focusVisibleWithin, setFocusVisibleWithin] = useState(false)
+
+  const messageRef = useRef()
+
+  useTextareaAutosize(messageRef.current, userMessage)
+
+  useEffect(() => {
+    if (settings.scroll && messages.length !== 0) {
+      const chatBody = document.querySelector('.wc-body')
+      chatBody.scrollTop = chatBody.scrollHeight
+    }
+  }, [messages, isAgentTyping])
+
+  useEffect(() => {
+    const label = document.querySelector('.wc-form__label')
+
+    if (userMessage.length === 0) {
+      label.classList.remove('govuk-visually-hidden')
+    } else {
+      label.classList.add('govuk-visually-hidden')
+    }
+  }, [userMessage])
+
+  const onChange = e => {
+    setUserMessage(e.target?.value)
+  }
+
+  const agentName = agent?.nickname || agent?.firstName
+
+  const connectionHeadlineText = agentStatusHeadline(availability, agentStatus, agentName)
+
+  useEffect(() => {
+    if (connectionHeadlineText) {
+      setLiveRegionText(`Floodline webchat - ${connectionHeadlineText}`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [connectionHeadlineText])
+
+  useEffect(() => {
+    if (isAgentTyping && isChatOpen) {
+      setLiveRegionText(`${agentName} is typing...`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [isAgentTyping, isChatOpen])
+
+  useEffect(() => {
+    const lastAgentMessage = messages[messages.length - 1]
+
+    if (agentStatus !== 'closed' && lastAgentMessage?.direction === 'outbound') {
+      setLiveRegionText(`${agentName} said: ${lastAgentMessage.text}`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [messages])
+
+  const sendMessage = () => {
+    if (messageRef.current.value.length === 0 || agentStatus === 'closed') {
+      return
+    }
+
+    try {
+      const message = messageRef.current.value.trim()
+      thread.sendTextMessage(message)
+      setLiveRegionText(`You said: ${message}`)
+    } catch (err) {
+      console.log('[Chat Error] sendMessage', err)
+    }
+
+    setUserMessage('')
+  }
+
+  const handleSubmit = e => {
+    e.preventDefault()
+    sendMessage()
+  }
+
+  const saveChat = () => {
+    const transcript = formatTranscript(messages)
+
+    const saveChatLink = document.querySelector('#transcript-download')
+
+    saveChatLink.setAttribute('href', `data:text/plain;charset=utf-8,${transcript}`)
+  }
+
+  const handleKeyPress = e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      switch (e.target.id) {
+        case 'text-area':
+          e.preventDefault()
+          sendMessage()
+          break
+        case 'end-chat':
+          onEndChatScreen(e)
+          break
+        case 'wc-settings':
+          onSettingsScreen(e)
+          break
+        case 'transcript-download':
+          saveChat()
+          break
+        default:
+          break
+      }
+    } else if (e.key === ' ') {
+      if (e.target.id === 'end-chat') {
+        onEndChatScreen(e)
+      }
+      if (e.target.id === 'wc-settings') {
+        onSettingsScreen(e)
+      }
+    } else {
+      thread.keystroke()
+      setTimeout(() => {
+        thread.stopTyping()
+      }, TYPING_INDICATOR_DURATION)
+    }
+  }
+
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-status'>
+        <p className='wc-status__availability'>{connectionHeadlineText}</p>
+        <a
+          id='end-chat'
+          className='wc-status__link'
+          href='#'
+          data-module='govuk-button'
+          role='button'
+          onClick={onEndChatScreen}
+          onKeyDown={handleKeyPress}
+        >
+          End chat
+        </a>
+      </div>
+
+      <div className='wc-body' tabIndex='0'>
+        <ul className='wc-chat'>
+          {messages.length
+            ? messages.map((msg, index) => <Message key={msg.id} message={msg} previousMessage={messages[index - 1]} />)
+            : null}
+          {isAgentTyping
+            ? (
+              <li className='wc-chat__message outbound'>
+                <div className='wc-chat__from'>{agentName} is typing</div>
+                <div className='wc-chat__text outbound'>
+                  <svg width='28' height='16' x='0px' y='0px' viewBox='0 0 28 16'>
+                    <circle stroke='none' cx='3' cy='8' r='3' fill='currentColor' />
+                    <circle stroke='none' cx='14' cy='8' r='3' fill='currentColor' />
+                    <circle stroke='none' cx='25' cy='8' r='3' fill='currentColor' />
+                  </svg>
+                </div>
+              </li>
+              )
+            : null}
+        </ul>
+      </div>
+
+      <PanelFooter>
+        <form className={`wc-form${focusVisibleWithin ? ' wc-focus-within' : ''}`} noValidate onSubmit={handleSubmit}>
+          <label className='govuk-label wc-form__label' htmlFor='wc-form-textarea'>
+            Your message<span className='govuk-visually-hidden'> (enter key submits)</span>
+          </label>
+
+          <textarea
+            ref={messageRef}
+            rows='1'
+            aria-required='true'
+            className='wc-form__textarea'
+            id='text-area'
+            name='message'
+            onChange={onChange}
+            onKeyDown={handleKeyPress}
+            onFocus={() => { setFocusVisibleWithin(isKeyboard) }}
+            onBlur={() => { setFocusVisibleWithin(false) }}
+            value={userMessage}
+          />
+
+          <input
+            type='submit'
+            className='wc-form__button govuk-button'
+            value='Send'
+            data-prevent-double-click='true'
+          />
+        </form>
+
+        <div className='wc-footer__settings'>
+          <a
+            href='#'
+            id='wc-settings'
+            className='wc-footer__settings-link'
+            data-module='govuk-button'
+            onKeyDown={handleKeyPress}
+            onClick={onSettingsScreen}
+          >
+            Settings
+          </a>
+          <a
+            href='#'
+            id='transcript-download'
+            className='wc-footer__settings-link'
+            data-module='govuk-button'
+            download='floodline-webchat-transcript.txt'
+            onKeyDown={handleKeyPress}
+            onClick={saveChat}
+          >
+            Save chat
+          </a>
+        </div>
+      </PanelFooter>
+    </>
+  )
+}