@defra/flood-webchat 0.0.1-beta.54 → 0.0.1-beta.55

package/docs/development-guide.md

@@ -0,0 +1,5 @@
+# Development Guide
+
+1) Clone the repo
+2) Run `npm install` to install the dependencies.
+3) Run `npm run dev` to run a demo server with hot module reloading on http://localhost:9000.

package/docs/how-to-publish.md

@@ -0,0 +1,41 @@
+# How to Publish
+
+This repo implements automated publishing via GitHub actions triggered by creating a release in GitHub.
+Releases should respect [the semantic versioning specification v2.0.0](https://semver.org/spec/v2.0.0.html).
+
+## A Pre-Release
+1) Go to the [GitHub repo homepage](https://github.com/DEFRA/flood-webchat) for this project.  
+2) Click "Create a new release"
+
+![](./assets/create-a-new-release.png)  
+
+3) Select your Target branch, by default it will be the "main" branch.  
+4) Click "Choose a Tag", enter a version tag with the appropriate semantic version bump and suffixed with a pre-release identifier and click "Create new tag". _(for example if the latest published version was `v1.2.3` and you wish to publish a pre-release from your "cool-update"
+   branch, name the release: `v1.2.4-cool-update.1`)_
+
+![](./assets/example-pre-release.png)
+
+5) Use your version name as a title, and add appropriate release notes in the description field.
+6) Tick the "Set as a pre-release" checkbox.
+7) Click "Publish release"
+8) A GitHub Action should then be triggered automatically, publishing your pre-release to npm.  
+9) You can install your pre-release into a consuming project by running `npm i @defra/flood-webchat@<version-number>`, e.g. `npm i @defra/flood-webchat@1.2.4-cool-update.1`.  
+
+_NOTE: pre-release identifiers must match the pattern `^-[0-9A-Za-z-].*$`_
+
+## A Release
+1) Go to the [GitHub repo homepage](https://github.com/DEFRA/flood-webchat) for this project.
+2) Click "Create a new release"
+
+![](./assets/create-a-new-release.png)
+
+3) Ensure that your Target branch is the "main" branch (this is the default).
+4) Click "Choose a Tag", enter a version tag with the appropriate semantic version bump.
+
+![](./assets/example-release.png)
+
+5) Use your version name as a title, and add appropriate release notes in the description field.
+6) Ensure that the "Set as a pre-release" checkbox is **NOT** checked.
+7) Click "Publish release"
+8) A GitHub Action should then be triggered automatically, publishing your release to npm.
+9) You can install your release into a consuming project by running `npm i @defra/flood-webchat@<version-number>`, e.g. `npm i @defra/flood-webchat@1.2.4`.

package/jest.config.mjs

@@ -0,0 +1,29 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+/** @type {import('jest').Config} */
+const config = {
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  transform: {
+    '\\.jsx?$': 'babel-jest',
+    '\\.mjs$': 'babel-jest'
+  },
+  projects: [
+    {
+      displayName: 'client-side',
+      testEnvironment: 'jsdom',
+      testMatch: ['**/__tests__/client/**/*.?(m)js?(x)'],
+      transformIgnorePatterns: []
+    },
+    {
+      displayName: 'server-side',
+      testEnvironment: 'node',
+      testMatch: ['**/__tests__/server/**/*.?(m)js?(x)']
+    }
+  ]
+}
+
+export default config

package/main.scss

@@ -1,9 +1,9 @@
 
 // Required GOVUK Styles
-@import "govuk-frontend/govuk/core/typography";
-@import "govuk-frontend/govuk/core/links";
-@import "govuk-frontend/govuk/utilities/visually-hidden";
-@import "govuk-frontend/govuk/components/button/button";
+@import "govuk-frontend/dist/govuk/core/typography";
+@import "govuk-frontend/dist/govuk/core/links";
+@import "govuk-frontend/dist/govuk/utilities/visually-hidden";
+@import "govuk-frontend/dist/govuk/components/button/button";
 
 // (ITCSS)
 @import "./src/client/scss/settings";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/flood-webchat",
-  "version": "0.0.1-beta.54",
+  "version": "0.0.1-beta.55",
   "description": "",
   "main": "dist/server.js",
   "browser": "dist/client.js",
@@ -57,7 +57,7 @@
     "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
-    "govuk-frontend": "^4.0.0"
+    "govuk-frontend": "^5.4.0"
   },
   "dependencies": {
     "@nice-devone/nice-cxone-chat-web-sdk": "^1.3.0",

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

@@ -0,0 +1,130 @@
+import React, { useEffect, useRef } from 'react'
+
+import { classnames } from '../../lib/classnames'
+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'
+
+export function Availability () {
+  const { availability, isChatOpen, setChatVisibility, unseenCount, threadId, setUnseenCount, setInstigatorId, setLiveRegionText } = useApp()
+
+  const buttonRef = useRef()
+
+  const showUnseenCount = unseenCount > 0 && !isChatOpen
+
+  const messageText = unseenCount > 1 ? 'new messages' : 'new message'
+
+  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 === ' ') {
+      setUnseenCount(0)
+      setChatVisibility(!isChatOpen)
+    }
+  }
+
+  useEffect(() => {
+    if (showUnseenCount) {
+      setLiveRegionText(`Floodline webchat - ${unseenCount} ${messageText}`)
+    }
+
+    return () => {
+      setLiveRegionText()
+    }
+  }, [unseenCount, isChatOpen])
+
+  useEffect(() => {
+    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()
+
+    return () => {
+      document.removeEventListener('scroll', onScroll)
+    }
+  }, [threadId, isChatOpen, availability])
+
+  switch (availability) {
+    case 'AVAILABLE':
+      return (
+        <>
+          <div
+            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'
+                draggable='false'
+                onClick={onClick}
+                onKeyUp={onKeyUp}
+                onKeyDown={onKeyDown}
+                role='button'
+                data-module='govuk-button'
+              >
+                {!threadId ? <>Start chat</> : <>Show chat</>}
+                {showUnseenCount
+                  ? (
+                    <span className='wc-availability__unseen'>
+                      {unseenCount}
+                      <span className='govuk-visually-hidden'> {messageText}</span>
+                    </span>
+                    )
+                  : null}
+              </a>
+            </div>
+          </div>
+          {!isChatOpen ? <LiveRegion /> : <Panel />}
+          <SkipLink />
+        </>
+      )
+    case 'EXISTING':
+    case 'UNAVAILABLE':
+      return (
+        <p className='govuk-body'>When it is available, a 'start chat' link will appear.</p>
+      )
+    default:
+      return (
+        <p className='govuk-body'>Checking availability</p>
+      )
+  }
+}

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

@@ -0,0 +1,233 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+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
+      }
+    }
+    if (e.key === ' ') {
+      if (e.target.id === 'end-chat') {
+        onEndChatScreen(e)
+      }
+      if (e.target.id === 'wc-settings') {
+        onSettingsScreen(e)
+      }
+    }
+  }
+
+  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>
+    </>
+  )
+}

package/src/client/components/chat/chat.scss

@@ -106,7 +106,6 @@
       background-color: govuk-colour('blue');
       border-radius: 10px 0 10px 10px;
 
-      .govuk-link:link,
       .govuk-link:visited {
         color: govuk-colour('white');
       }

package/src/client/components/errorSummary/error-summary.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+export const ErrorSummary = ({ errors }) => {
+  const errs = Object.keys(errors)
+
+  const goToInput = e => {
+    e.preventDefault()
+    const key = e.target.getAttribute('data-key')
+    document.querySelector(`#wc-${key}`).focus()
+  }
+
+  if (errs.length === 0) {
+    return null
+  }
+
+  return (
+    <div className='govuk-error-summary govuk-!-static-margin-bottom-7' data-module='govuk-error-summary' tabIndex='-1'>
+      <div role='alert'>
+        <h2 id='wc-error' className='wc-error-summary__title govuk-error-summary__title'>
+          There is a problem
+        </h2>
+        <div className='govuk-error-summary__body'>
+          <ul className='govuk-list govuk-error-summary__list wc-error-summary__list'>
+            {errs.map(key => (
+              <li key={key}>
+                <a href='#' data-key={key} onClick={goToInput}>{errors[key]}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}

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'
+
+const DEBOUNCE_MILLISECONDS = 2000
+
+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)
+    }
+  }, DEBOUNCE_MILLISECONDS), [textA, textB])
+
+  useEffect(() => {
+    if (liveRegionText) {
+      clearText()
+      setText(liveRegionText)
+    }
+
+    if (isSessionEnded) {
+      clearText()
+      setLiveRegionText()
+    }
+
+    return () => {
+      clearText()
+      setLiveRegionText()
+    }
+  }, [liveRegionText])
+
+  return (
+    <>
+      <div className='wc-live' role='status' aria-atomic='true'>
+        {textA}
+      </div>
+      <div className='wc-live' role='status' aria-atomic='true'>
+        {textB}
+      </div>
+    </>
+  )
+}

package/src/client/components/message/message.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { classnames } from '../../lib/classnames'
+import { formatMessage } from '../../lib/transform-messages'
+
+export function Message ({ message, previousMessage }) {
+  const outbound = message.direction === 'outbound'
+
+  const messageOwnerSameAsPrevious = message?.direction === previousMessage?.direction
+
+  return (
+    <li className={classnames('wc-chat__message', outbound ? 'outbound' : 'inbound')}>
+      <div className='wc-chat__from'>
+        {messageOwnerSameAsPrevious ? null : <span className={classnames(outbound ? 'outbound' : 'inbound')}>{outbound ? message.assignee : 'You'}</span>}
+        <span className='govuk-visually-hidden'>:</span>
+      </div>
+      <div className={classnames('wc-chat__text', outbound ? 'outbound' : 'inbound')}>
+        {formatMessage(message.text)}
+      </div>
+    </li>
+  )
+}

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export function PanelFooter ({ children }) {
+  return (
+    <div className='wc-footer'>
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,75 @@
+import React from 'react'
+import { useApp } from '../../store/useApp.js'
+import { historyReplaceState } from '../../lib/history.js'
+
+export function PanelHeader () {
+  const { thread, threadId, setChatVisibility, setUnseenCount, isMobile } = useApp()
+
+  const onClose = e => {
+    e.preventDefault()
+    setChatVisibility(false)
+    historyReplaceState()
+
+    if (threadId) {
+      thread?.lastMessageSeen()
+      setUnseenCount(0)
+    }
+  }
+
+  const BackButtonComponent = (
+    <button className='wc-header__back' aria-label='Close the webchat' onClick={onClose}>
+      <svg aria-hidden='true' focusable='false' width='20' height='20' viewBox='0 0 20 20'>
+        <path d='M4.828,11L12.314,18.485L10.899,19.899L1,10L10.899,0.101L12.314,1.515L4.828,9L19,9L19,11L4.828,11Z' fill='currentColor' />
+      </svg>
+    </button>
+  )
+
+  const CloseButtonComponent = (
+    <button className='wc-header__close' aria-label='Close the webchat' onClick={onClose}>
+      <svg aria-hidden='true' focusable='false' width='20' height='20' viewBox='0 0 20 20'>
+        <path d='M10,8.6L15.6,3L17,4.4L11.4,10L17,15.6L15.6,17L10,11.4L4.4,17L3,15.6L8.6,10L3,4.4L4.4,3L10,8.6Z' fill='currentColor' />
+      </svg>
+    </button>
+  )
+
+  const MinimiseButtonComponent = (
+    <button className='wc-header__hide' aria-label='Minimise the webchat' onClick={onClose}>
+      <svg aria-hidden='true' focusable='false' width='20' height='20' viewBox='0 0 20 20'>
+        <path d='M10 14.4l-7-7L4.4 6l5.6 5.6L15.6 6 17 7.4l-7 7z' fill='currentColor' />
+      </svg>
+    </button>
+  )
+
+  const isMobileAndHasHistory = isMobile && window.history.state
+  const isMobileAndNoHistory = isMobile && !window.history.state
+
+  let RightButtonComponent = CloseButtonComponent
+
+  if (threadId) {
+    RightButtonComponent = MinimiseButtonComponent
+
+    if (isMobileAndNoHistory) {
+      RightButtonComponent = MinimiseButtonComponent
+    }
+  }
+
+  if (!threadId && isMobileAndNoHistory) {
+    RightButtonComponent = CloseButtonComponent
+  }
+
+  if (isMobileAndHasHistory) {
+    RightButtonComponent = null
+  }
+
+  return (
+    <div className='wc-header'>
+      {isMobileAndHasHistory ? BackButtonComponent : null}
+
+      <h2 id='wc-header' className='wc-header__title'>
+        Floodline webchat
+      </h2>
+
+      {RightButtonComponent}
+    </div>
+  )
+}