@defra/flood-webchat 0.0.1-alpha.9 → 0.0.1-beta.10

package/package.json

@@ -1,20 +1,19 @@
 {
   "name": "@defra/flood-webchat",
-  "version": "0.0.1-alpha.9",
+  "version": "0.0.1-beta.10",
   "description": "",
-  "type": "module",
-  "main": "src/server/index.js",
-  "browser": "src/client/index.js",
+  "main": "dist/server.js",
+  "browser": "dist/client.js",
   "scripts": {
-    "test": "npm run compile-templates && npm run lint && npm run unit-test",
-    "dev": "npm run compile-templates && node -r dotenv/config node_modules/.bin/webpack server --config demo/webpack.config.mjs",
+    "test": "npm run lint && npm run unit-test",
+    "dev": "(cd demo && webpack server)",
+    "build": "webpack",
     "unit-test": "jest",
     "lint": "npm run lint:js && npm run lint:scss",
     "lint:fix": "npm run lint:js -- --fix && npm run lint:scss -- --fix",
     "lint:js": "standard",
     "lint:scss": "stylelint \"**/*.scss\"",
-    "prepare": "node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') { throw e } }\"",
-    "compile-templates": "mkdir -p dist && nunjucks-precompile templates > ./dist/templates.js"
+    "prepare": "node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') { throw e } }\""
   },
   "standard": {
     "ignore": [
@@ -30,6 +29,10 @@
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.15",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.4",
     "babel-jest": "^29.6.4",
     "babel-loader": "^9.1.3",
@@ -49,14 +52,21 @@
     "stylelint-config-gds": "^1.0.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^4.15.1",
+    "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
-    "govuk-frontend": "^3.14.0"
+    "govuk-frontend": "^4.0.0"
   },
   "dependencies": {
-    "@nice-devone/nice-cxone-chat-web-sdk": "1.3.0",
-    "axios": "^0.24.0",
-    "nunjucks": "^3.2.4"
+    "@nice-devone/nice-cxone-chat-web-sdk": "^1.3.0",
+    "axios": "^1.5.0",
+    "jwt-decode": "^3.1.2",
+    "luxon": "^3.4.3",
+    "querystring": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sanitize-html": "^2.11.0",
+    "uuid": "^9.0.1"
   }
 }

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

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import { classnames } from '../../lib/classnames'
+import { Panel } from '../panel/panel.jsx'
+import { useApp } from '../../store/useApp'
+
+export function Availability () {
+  const { availability, messages, isChatOpen, setChatVisibility } = useApp()
+
+  const [isFixed, setIsFixed] = useState(false)
+  const buttonRef = useRef()
+
+  const onClick = () => {
+    setChatVisibility(!isChatOpen)
+  }
+
+  const onKeyDown = event => {
+    if (event.key === ' ') {
+      event.preventDefault()
+    }
+  }
+
+  const onKeyUp = event => {
+    if (event.key === ' ') {
+      setChatVisibility(!isChatOpen)
+    }
+  }
+
+  const intersectionCallback = entries => {
+    const [entry] = entries
+    const isBelowFold = !entry.isIntersecting && entry.boundingClientRect.top > 0
+    setIsFixed(!isChatOpen && isBelowFold)
+  }
+
+  useEffect(() => {
+    const observer = new window.IntersectionObserver(intersectionCallback, {
+      rootMargin: '35px'
+    })
+
+    const parentElement = buttonRef.current?.parentElement
+
+    if (parentElement) {
+      observer.observe(parentElement)
+    }
+
+    return () => {
+      if (parentElement) {
+        observer.unobserve(parentElement)
+      }
+    }
+  }, [buttonRef, isChatOpen])
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('wc-scroll-padding', isFixed)
+    document.body.classList.toggle('wc-scroll-padding', isFixed)
+  }, [isFixed])
+
+  let TextComponent = (<>Show Chat</>)
+
+  if (!messages.length) {
+    TextComponent = (<>Start Chat</>)
+  }
+
+  switch (availability) {
+    case 'AVAILABLE':
+      return (
+        <>
+          <div
+            className={classnames('wc-availability', isFixed && 'wc-availability--fixed', isChatOpen && 'wc-open')}
+            ref={buttonRef}
+          >
+            <div className='wc-availability__inner'>
+              <a
+                className='wc-availability__link'
+                href='#webchat'
+                draggable='false'
+                onClick={onClick}
+                onKeyUp={onKeyUp}
+                onKeyDown={onKeyDown}
+              >
+                {TextComponent}
+              </a>
+            </div>
+          </div>
+          {isChatOpen && <Panel />}
+        </>
+      )
+    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/availability/availability.scss

@@ -0,0 +1,89 @@
+
+.wc-availability__inner {
+  max-width: 960px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.wc-availability--fixed {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding-left: 15px;
+  padding-right: 15px;
+
+  @include mq ($from: 'tablet') {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+
+  background-color: govuk-colour('light-grey');
+
+  .wc-availability__link {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
+
+.wc-availability__link {
+  @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;
+  }
+
+  .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');
+    }
+  }
+}
+
+.wc-availability__unseen {
+  display: inline-block;
+  position: relative;
+  border-radius: 10px;
+  background-color: govuk-colour('black');
+  color: govuk-colour('white');
+  font-weight: bold;
+  font-size: 14px;
+  padding: 0 6px;
+  margin-left: 5px;
+
+  @include mq ($from: tablet) {
+    top: -1px;
+    padding-left: 7px;
+    padding-right: 7px;
+  }
+}

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

@@ -0,0 +1,143 @@
+import React, { useEffect, useRef, useState } from 'react'
+import sanitizeHtml from 'sanitize-html'
+
+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'
+
+export function Chat ({ onEndChat }) {
+  const { availability, thread, messages, agent, agentStatus, isAgentTyping } = useApp()
+
+  const [userMessage, setUserMessage] = useState('')
+
+  const messageRef = useRef()
+
+  useTextareaAutosize(messageRef.current, userMessage)
+
+  useEffect(() => {
+    if (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
+
+  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'
+  }
+
+  const sendMessage = e => {
+    e.preventDefault()
+
+    if (messageRef.current.value.length === 0) {
+      return
+    }
+
+    try {
+      thread.sendTextMessage(sanitizeHtml(messageRef.current.value.trim()))
+    } catch (err) {
+      console.log('[Chat Error] sendMessage', err)
+    }
+
+    setUserMessage('')
+  }
+
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-status'>
+        <p className='wc-status__availability govuk-body-s'>{connectionHeadlineText}</p>
+        <a className='wc-status__link govuk-!-font-size-16' href='#' data-module='govuk-button' onClick={onEndChat}>End chat</a>
+      </div>
+
+      <div className='wc-body'>
+        <div className='wc-chat__body'>
+          <ul className='wc-chat__messages'>
+            {messages.length
+              ? messages.map((msg, index) => <Message key={msg.id} message={msg} previousMessage={messages[index - 1]} />)
+              : null}
+            {isAgentTyping
+              ? (
+                <li className='wc-chat__message govuk-body outbound'>
+                  <div className='wc-chat__from govuk-!-font-size-14'>{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>
+      </div>
+
+      <PanelFooter>
+        <div className='wc-footer__input'>
+          <form className='wc-form' noValidate>
+            <label className='govuk-label wc-form__label govuk-!-font-size-16' 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 govuk-textarea govuk-!-font-size-16'
+              id='wc-form-textarea'
+              name='message'
+              onChange={onChange}
+              value={userMessage}
+            />
+
+            <input
+              type='submit'
+              className='wc-form__button govuk-button govuk-!-font-size-16'
+              value='Send'
+              data-prevent-double-click='true'
+              onClick={sendMessage}
+            />
+          </form>
+        </div>
+
+        <div className='wc-footer__settings'>
+          <a href='#' className='wc-footer__settings-link' data-module='govuk-button'>Settings</a>
+          <a href='#' className='wc-footer__settings-link' data-module='govuk-button' download='transcript.txt'>Save chat</a>
+        </div>
+      </PanelFooter>
+    </>
+  )
+}

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

@@ -0,0 +1,134 @@
+@keyframes blink {
+  50% {
+    fill: transparent
+  }
+}
+
+.wc-status {
+  display: flex;
+  border-bottom: 1px solid $govuk-border-colour;
+  padding: govuk-spacing(2);
+
+  &__availability {
+    margin-bottom: 0;
+  }
+
+  &__link {
+    margin-left: auto;
+  }
+}
+
+.wc-chat {
+  &__messages {
+    overflow: scroll;
+    list-style: none;
+    padding: 0;
+    margin: govuk-spacing(2) 0;
+  }
+
+  &__message {
+    margin-bottom: govuk-spacing(1);
+
+    &.inbound {
+      text-align: right;
+    }
+  }
+
+  &__from {
+    color: govuk-colour('dark-grey');
+    margin-bottom: 0;
+  }
+
+  &__text {
+    padding: govuk-spacing(2);
+    margin-bottom: 0;
+    display: inline-block;
+
+    &.inbound {
+      color: govuk-colour('white');
+      background-color: govuk-colour('blue');
+      border-radius: 8px 0 8px 8px;
+    }
+
+    &.outbound {
+      background-color: govuk-colour('light-grey');
+      border-radius: 0 8px 8px;
+    }
+
+    svg {
+      display: block;
+      color: govuk-colour('dark-grey');
+    }
+
+    svg circle { 
+      animation: 1s blink infinite;
+      fill: currentcolor;
+      
+      &:nth-child(2) {
+        animation-delay: 250ms
+      }
+
+      &:nth-child(3) {
+        animation-delay: 500ms
+      }
+    }
+  }
+}
+
+.wc-form {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+
+  &__label {
+    position: absolute;
+    top: 9px;
+    left: 5px;
+    z-index: 3;
+    margin-bottom: 0;
+    color: govuk-colour('dark-grey');
+  }
+
+  &__textarea {
+    position: relative;
+    width: 100%;
+    margin-bottom: 0;
+    min-height: auto;
+    max-height: 120px;
+    resize: none;
+    border: none;
+    overflow-x: hidden;
+    overscroll-behavior: contain;
+    z-index: 4;
+    background-color: transparent;
+  }
+
+  &__button {
+    margin: auto 0 0 govuk-spacing(3);
+    width: auto;
+  }
+}
+
+.wc-footer {
+  &__settings {
+    @include govuk-responsive-padding(2);
+
+    display: flex;
+    flex-direction: row;
+    border-top: 1px solid govuk-colour('black');
+
+    &-link {
+      &:first-child {
+        margin-right: govuk-spacing(3);
+      }
+    }
+  }
+
+  &__input {
+    @include govuk-responsive-padding(2);
+
+    border-top: 1px solid govuk-colour('black');
+  }
+}

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import { classnames } from '../../lib/classnames'
+
+export function Message ({ message, previousMessage }) {
+  const outbound = message.direction === 'outbound'
+
+  const messageOwnerSameAsPrevious = message?.direction === previousMessage?.direction
+
+  return (
+    <li className={classnames('wc-chat__message govuk-body', outbound ? 'outbound' : 'inbound')}>
+      <div className='wc-chat__from govuk-!-font-size-14'>
+        {messageOwnerSameAsPrevious ? null : <span>{outbound ? message.assignee : 'You'}</span>}
+        <span className='govuk-visually-hidden'>:</span>
+      </div>
+      <p className={classnames('wc-chat__text', 'govuk-body-s', outbound ? 'outbound' : 'inbound')}>
+        {message.text}
+      </p>
+    </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,39 @@
+import React from 'react'
+import { useApp } from '../../store/useApp.js'
+
+export function PanelHeader () {
+  const { thread, setChatVisibility } = useApp()
+
+  const onClose = e => {
+    e.preventDefault()
+    setChatVisibility(false)
+  }
+
+  let ButtonComponent = (
+    <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>
+  )
+
+  if (thread) {
+    ButtonComponent = (
+      <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>
+    )
+  }
+
+  return (
+    <div className='wc-header'>
+      <h2 id='wc-header-title' className='wc-header__title govuk-heading-s'>
+        Floodline Webchat
+      </h2>
+
+      {ButtonComponent}
+    </div>
+  )
+}