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

package/src/client/scss/_settings.scss

@@ -0,0 +1,101 @@
+.wc-heading {
+    @extend %govuk-heading-m;
+    font-size: 19px;
+    margin-bottom: 15px;
+}
+
+.wc-list {
+    @extend %govuk-list;
+    @extend %govuk-list--bullet;
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-body p {
+    font-size: 16px;
+    line-height: 1.25;
+    margin-bottom: 15px;
+    @extend %govuk-body-s;
+}
+
+.wc-body .govuk-error-message {
+    color: govuk-colour('red');
+    font-weight: 700;
+}
+
+.wc-link,
+.wc-button,
+.govuk-button-group .wc-button,
+.govuk-button-group .wc-link {
+    font-size: 16px;
+}
+
+.wc-button[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.wc-label {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-form-group {
+    margin-bottom: 15px;
+}
+
+.wc-hint {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-inset-text {
+    margin: 0 0 20px;
+    padding: 5px 5px 5px 15px;
+    font-size: 16px;
+    border-left-width: 5px;
+}
+
+.wc-error-summary__title {
+    font-size: 19px;
+    line-height: 1.25;
+    margin-bottom: 15px;
+}
+
+.wc-error-summary__list,
+.wc-error-message {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-input, .wc-textarea {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-back-link {
+    font-size: 16px;
+    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/scss/_tools.scss

@@ -0,0 +1,33 @@
+// Check there is ot already similar functinality in GOV.UK Frontend
+
+@mixin defra-visually-hidden() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    -webkit-clip-path: inset(50%);
+    clip-path: inset(50%);
+    border: 0;
+    white-space: nowrap;
+}
+
+// Map specific mixins
+@mixin focus($glow: 8px, $strong: 5px, $background: 2px, $inset: 0) {
+    position:absolute;
+    content:'';
+    left: 5px;
+    right: 5px;
+    top: 5px;
+    bottom: 5px;
+    box-shadow:
+        0 0 0 $background #ffffff,
+        inset 0 0 0 $inset govuk-colour('black'),
+        0 0 0 $strong govuk-colour('black'),
+        0 0 0 $glow $govuk-focus-colour;
+    outline: 3px solid transparent;
+    pointer-events: none;
+    z-index: 99;
+}

package/src/client/scss/_utilities.scss

@@ -0,0 +1,25 @@
+.wc-u-html {
+    @include mq ($until: tablet) {
+        height: 100vh;
+        overflow: hidden;
+    }
+}
+
+.wc-u-body {
+    @include mq ($until: tablet) {
+        position: fixed;
+        overflow: hidden;
+        top:0;
+        right:0;
+        bottom:0;
+        left:0;
+    }
+}
+
+.wc-u-hidden {
+    visibility: hidden;
+}
+
+.wc-u-scroll-padding {
+    scroll-padding-bottom: calc(2rem + 20px);
+}

package/src/client/store/AppProvider.jsx

@@ -0,0 +1,184 @@
+import React, { createContext, useEffect, useReducer, useMemo } from 'react'
+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'
+
+export const AppContext = createContext(initialState)
+
+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
+   */
+  useEffect(() => {
+    dispatch({ type: 'SET_AVAILABILITY', payload: availability })
+
+    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))
+  }, [])
+
+  /**
+   * Set browser history on start chat click
+   */
+  useEffect(() => {
+    if (window.location.hash === '#webchat') {
+      setChatVisibility(true)
+    }
+
+    const onBrowserNavigation = () => {
+      if (window.location.hash === '#webchat') {
+        setChatVisibility(true)
+      } else {
+        setChatVisibility(false)
+      }
+    }
+
+    window.addEventListener('popstate', onBrowserNavigation)
+
+    return () => {
+      window.removeEventListener('popstate', onBrowserNavigation)
+    }
+  }, [])
+
+  /**
+   * State update functions
+   */
+  const setChatVisibility = payload => {
+    dispatch({ type: 'SET_CHAT_VISIBILITY', payload })
+  }
+
+  const setCustomerId = customerId => {
+    dispatch({ type: 'SET_CUSTOMER_ID', payload: customerId })
+  }
+
+  const setThreadId = threadId => {
+    dispatch({ type: 'SET_THREAD_ID', payload: threadId })
+  }
+
+  const setThread = thread => {
+    dispatch({ type: 'SET_THREAD', payload: thread })
+  }
+
+  const setMessages = messages => {
+    dispatch({ type: 'SET_MESSAGES', payload: messages })
+  }
+
+  const setSettings = data => {
+    dispatch({ type: 'SET_SETTINGS', payload: data })
+  }
+
+  const setUnseenCount = unseenCount => {
+    dispatch({ type: 'SET_UNSEEN_COUNT', payload: unseenCount })
+  }
+
+  const setInstigatorId = id => {
+    dispatch({ type: 'SET_INSTIGATOR_ID', payload: id })
+  }
+
+  const setLiveRegionText = text => {
+    dispatch({ type: 'SET_LIVE_REGION_TEXT', payload: text })
+  }
+
+  /**
+   * Application-wide state and state functions
+   */
+  const store = useMemo(() => ({
+    ...state,
+    sdk,
+    setSettings,
+    setCustomerId,
+    setThreadId,
+    setThread,
+    setMessages,
+    setUnseenCount,
+    setChatVisibility,
+    setInstigatorId,
+    setLiveRegionText,
+    onLiveChatRecovered,
+    onAssignedAgentChanged,
+    onAgentTypingStarted,
+    onAgentTypingEnded,
+    onMessageCreated,
+    onContactStatusChanged
+  }))
+
+  return (
+    <AppContext.Provider value={store}>
+      {children}
+    </AppContext.Provider>
+  )
+}

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

@@ -0,0 +1,153 @@
+import { transformMessages, transformMessage } from '../lib/transform-messages'
+import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY, SETTINGS_STORAGE_KEY, MESSAGES_UNSEEN_COUNT } from './constants'
+
+const setSettings = (state, payload) => {
+  if (payload) {
+    window.localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(payload))
+  } else {
+    window.localStorage.removeItem(SETTINGS_STORAGE_KEY)
+  }
+
+  return {
+    ...state,
+    settings: payload
+  }
+}
+
+const setCustomerId = (state, payload) => {
+  if (payload) {
+    window.localStorage.setItem(CUSTOMER_ID_STORAGE_KEY, payload)
+  } else {
+    window.localStorage.removeItem(CUSTOMER_ID_STORAGE_KEY)
+  }
+
+  return {
+    ...state,
+    customerId: payload
+  }
+}
+
+const setThreadId = (state, payload) => {
+  if (payload) {
+    window.localStorage.setItem(THREAD_ID_STORAGE_KEY, payload)
+  } else {
+    window.localStorage.removeItem(THREAD_ID_STORAGE_KEY)
+  }
+
+  return {
+    ...state,
+    threadId: payload
+  }
+}
+
+const setChatVisibility = (state, payload) => {
+  return {
+    ...state,
+    isChatOpen: payload
+  }
+}
+
+const setAvailability = (state, payload) => {
+  return {
+    ...state,
+    availability: payload
+  }
+}
+
+const setThread = (state, payload) => {
+  return {
+    ...state,
+    thread: payload
+  }
+}
+
+const setMessages = (state, payload) => {
+  return {
+    ...state,
+    messages: transformMessages(payload).reverse()
+  }
+}
+
+const setMessage = (state, payload) => {
+  return {
+    ...state,
+    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
+  }
+}
+
+const setInstigatorId = (state, payload) => {
+  return {
+    ...state,
+    instigatorId: payload
+  }
+}
+
+const setLiveRegionText = (state, payload) => {
+  return {
+    ...state,
+    liveRegionText: payload
+  }
+}
+
+const toggleIsMobile = (state, payload) => {
+  return {
+    ...state,
+    isMobile: payload
+  }
+}
+
+const toggleIsKeyboard = (state, payload) => {
+  return {
+    ...state,
+    isKeyboard: payload
+  }
+}
+
+export const actionsMap = {
+  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,
+  TOGGLE_IS_MOBILE: toggleIsMobile,
+  TOGGLE_IS_KEYBOARD: toggleIsKeyboard
+}

package/src/client/store/constants.js

@@ -0,0 +1,5 @@
+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'

package/src/client/store/reducer.js

@@ -0,0 +1,31 @@
+import { actionsMap } from './actions-map'
+
+export const initialState = {
+  availability: null,
+  customerId: null,
+  threadId: null,
+  thread: null,
+  messages: [],
+  unseenCount: 0,
+  instigatorId: null,
+  agent: null,
+  agentStatus: null,
+  isAgentTyping: false,
+  isChatOpen: false,
+  isMobile: window.matchMedia('(max-width: 640px)').matches,
+  isKeyboard: false,
+  settings: { audio: true, scroll: true }
+}
+
+export const reducer = (state, action) => {
+  const { type, payload } = action
+
+  const fn = actionsMap[type]
+
+  if (fn) {
+    const actionFunction = fn.bind(this, state, payload)
+    return actionFunction()
+  }
+
+  return state
+}

package/src/client/store/useApp.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react'
+
+import { AppContext } from './AppProvider.jsx'
+
+export const useApp = () => useContext(AppContext)

package/src/client/store/useChatSdk.js

@@ -0,0 +1,37 @@
+export const useChatSdk = sdk => {
+  const connect = async () => sdk.authorize()
+
+  const fetchCustomerId = async () => {
+    const response = await connect()
+    return response?.consumerIdentity.idOnExternalPlatform
+  }
+
+  const fetchThread = async threadId => {
+    await connect()
+    return sdk.getThread(threadId)
+  }
+
+  const fetchMessages = async (thread, threadId) => {
+    await connect()
+
+    const recovered = await thread.recover(threadId)
+
+    const allMessages = []
+    let fetchedMessages = recovered.messages
+
+    while (fetchedMessages.length) {
+      fetchedMessages.map(msg => allMessages.push(msg))
+
+      try {
+        const response = await thread.loadMoreMessages()
+        fetchedMessages = response.data.messages
+      } catch (err) {
+        fetchedMessages = []
+      }
+    }
+
+    return allMessages
+  }
+
+  return { connect, fetchCustomerId, fetchThread, fetchMessages }
+}

package/src/server/lib/utils.js

@@ -1,15 +1,31 @@
-const isWithinHours = (days, date = null) => {
-  const now = date ? new Date(date) : new Date()
+const { DateTime } = require('luxon')
 
-  const name = now.toLocaleDateString('en-GB', { weekday: 'long' })
-  const day = days.find(d => d.day.toLowerCase() === name.toLowerCase())
-  const dateItems = now.toLocaleDateString('en-GB').split('/')
-  const open = `${dateItems[2]}-${dateItems[1]}-${dateItems[0]}T${day.openTime}`
-  const close = `${dateItems[2]}-${dateItems[1]}-${dateItems[0]}T${day.closeTime}`
+const getHour = time => Number(time.split(':')[0])
 
-  return now.getTime() >= Date.parse(open) && now.getTime() <= Date.parse(close)
+const isWithinHours = (days, date) => {
+  const now = date ? DateTime.fromISO(date) : DateTime.local()
+  now.setZone('Europe/London')
+
+  const newDate = date ? new Date(date) : new Date()
+
+  const today = newDate.toLocaleDateString('en-GB', { weekday: 'long' })
+  const dateParts = newDate.toLocaleDateString('en-GB').split('/')
+
+  const todaysAvailability = days.find(item => item.day === today)
+  const todaysDateTimeOpen = DateTime.local(Number(dateParts[2]), Number(dateParts[1]), Number(dateParts[0]), getHour(todaysAvailability.openTime))
+  const todaysDateTimeClose = DateTime.local(Number(dateParts[2]), Number(dateParts[1]), Number(dateParts[0]), getHour(todaysAvailability.closeTime))
+
+  return now.diff(todaysDateTimeOpen).milliseconds >= 0 && now.diff(todaysDateTimeClose).milliseconds <= 0
+}
+
+const stripPageTitle = title => {
+  const prefixPattern = /^\(\d+ new messages?\) - /
+
+  return title.replace(prefixPattern, '')
 }
 
 module.exports = {
-  isWithinHours
+  isWithinHours,
+  stripPageTitle
+
 }

package/webpack.config.mjs

@@ -9,8 +9,6 @@ export default {
     client: path.join(__dirname, 'src/client/index.jsx'),
     server: path.join(__dirname, 'src/server/index.js')
   },
-  devtool: 'source-map',
-  mode: 'development',
   output: {
     path: path.resolve(__dirname, 'dist'),
     library: {

package/webpack.prod.mjs

@@ -0,0 +1,7 @@
+import { merge } from 'webpack-merge'
+
+import common from './webpack.config.mjs'
+
+export default merge(common, {
+  mode: 'production'
+})

package/dist/client.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.js","mappings":"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","sources":["webpack://@defra/flood-webchat/./src/client/components/availability/availability.jsx","webpack://@defra/flood-webchat/./src/client/lib/check-availability.js","webpack://@defra/flood-webchat/./src/client/lib/classnames.js","webpack://@defra/flood-webchat/./src/client/lib/external-stores.js","webpack://@defra/flood-webchat/./src/client/lib/external-sync-store.js","webpack://@defra/flood-webchat/external commonjs \"react\"","webpack://@defra/flood-webchat/external commonjs \"react-dom/client\"","webpack://@defra/flood-webchat/webpack/bootstrap","webpack://@defra/flood-webchat/webpack/runtime/compat get default export","webpack://@defra/flood-webchat/webpack/runtime/define property getters","webpack://@defra/flood-webchat/webpack/runtime/hasOwnProperty shorthand","webpack://@defra/flood-webchat/webpack/runtime/make namespace object","webpack://@defra/flood-webchat/./src/client/index.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport { classnames } from '../../lib/classnames'\nimport { useMessageThread, useWebchatOpenState } from '../../lib/external-stores'\n\nexport function Availability (props) {\n  const [isOpen, setOpen] = useWebchatOpenState()\n  const [isFixed, setFixed] = useState(false)\n  const buttonRef = useRef()\n  const onClick = () => {\n    setOpen(!isOpen)\n  }\n  const onKeyDown = event => {\n    if (event.key === ' ') {\n      event.preventDefault()\n    }\n  }\n  const onKeyUp = event => {\n    if (event.key === ' ') {\n      setOpen(!isOpen)\n    }\n  }\n\n  const intersectionCallback = entries => {\n    const [entry] = entries\n    const isBelowFold = !entry.isIntersecting && entry.boundingClientRect.top > 0\n    setFixed(!isOpen && isBelowFold)\n  }\n\n  useEffect(() => {\n    const observer = new window.IntersectionObserver(intersectionCallback, {\n      rootMargin: '35px'\n    })\n    const parentElement = buttonRef.current?.parentElement\n    if (parentElement) {\n      observer.observe(parentElement)\n    }\n    return () => {\n      if (parentElement) {\n        observer.unobserve(parentElement)\n      }\n    }\n  }, [buttonRef, isOpen])\n\n  useEffect(() => {\n    document.documentElement.classList.toggle('wc-scroll-padding', isFixed)\n    document.body.classList.toggle('wc-scroll-padding', isFixed)\n  }, [isFixed])\n\n  switch (props.availability) {\n    case 'AVAILABLE':\n      return (\n        <div\n          className={classnames('wc-availability', isFixed && 'wc-availability--fixed')}\n          ref={buttonRef}\n        >\n          <div className='wc-availability__inner'>\n            <a\n              className='wc-availability__link'\n              href='#webchat' role='button' draggable='false'\n              onClick={onClick}\n              onKeyUp={onKeyUp}\n              onKeyDown={onKeyDown}\n            >\n              <AvailabilityContent />\n            </a>\n          </div>\n        </div>\n      )\n    case 'EXISTING':\n    case 'UNAVAILABLE':\n      return (\n        <p className='govuk-body'>When it is available, a 'start chat' link will appear.</p>\n      )\n    default:\n      return (\n        <p className='govuk-body'>Checking availability</p>\n      )\n  }\n}\n\nfunction AvailabilityContent () {\n  const [thread] = useMessageThread()\n  const unreadMessageCount = thread.filter(message => !message.read).length\n  if (!thread.length) {\n    return (\n      <>\n        Start Chat\n      </>\n    )\n  }\n  return (\n    <>\n      Show Chat {!!unreadMessageCount && (\n        <>\n          <span className='wc-availability__unseen'>{unreadMessageCount}</span>\n          <span className='govuk-visually-hidden'> {unreadMessageCount === 1 ? 'new message' : 'new messages'}</span>\n        </>\n    )}\n    </>\n  )\n}\n","export async function checkAvailability (endpoint) {\n  const response = await fetch(endpoint)\n  const data = await response.json()\n  return {\n    availability: data.availability || 'UNAVAILABLE'\n  }\n}\n","export const classnames = (...classes) => classes.filter(classname => classname && typeof classname === 'string').join(' ')\n","import ExternalSyncStore from './external-sync-store'\n\nexport const useWebchatOpenState = ExternalSyncStore.create(false)\nexport const useMessageThread = ExternalSyncStore.create([])\n","import { useSyncExternalStore } from 'react'\n\nexport default class ExternalSyncStore {\n  constructor (initialValue) {\n    this._value = initialValue\n    this._listeners = []\n  }\n\n  update (value) {\n    this._value = value\n    this.emitChange()\n  }\n\n  subscribe (listener) {\n    this._listeners = [...this._listeners, listener]\n    return () => {\n      this._listeners = this._listeners.filter(l => l !== listener)\n    }\n  }\n\n  emitChange () {\n    for (const listener of this._listeners) {\n      listener()\n    }\n  }\n\n  getSnapshot () {\n    return this._value\n  }\n\n  static create (initialValue) {\n    const store = new ExternalSyncStore(initialValue)\n    const boundSubscribe = store.subscribe.bind(store)\n    const boundGetSnapshot = store.getSnapshot.bind(store)\n    const boundUpdate = store.update.bind(store)\n\n    return () => [\n      useSyncExternalStore(boundSubscribe, boundGetSnapshot),\n      boundUpdate\n    ]\n  }\n}\n","module.exports = require(\"react\");","module.exports = require(\"react-dom/client\");","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import React from 'react'\nimport { createRoot } from 'react-dom/client'\nimport { Availability } from './components/availability/availability.jsx'\nimport { checkAvailability } from './lib/check-availability'\n\nexport async function init (container, options) {\n  const root = createRoot(container)\n  let availability\n  try {\n    const result = await checkAvailability(options.availabilityEndpoint)\n    availability = result.availability\n  } catch (e) {\n    availability = 'UNAVAILABLE'\n  }\n  root.render(<Availability availability={availability} />)\n}\n"],"names":["React","useEffect","useRef","useState","classnames","useMessageThread","useWebchatOpenState","Availability","props","isOpen","setOpen","isFixed","setFixed","buttonRef","onClick","onKeyDown","event","key","preventDefault","onKeyUp","intersectionCallback","entries","entry","isBelowFold","isIntersecting","boundingClientRect","top","observer","window","IntersectionObserver","rootMargin","parentElement","current","observe","unobserve","document","documentElement","classList","toggle","body","availability","createElement","className","ref","href","role","draggable","AvailabilityContent","thread","unreadMessageCount","filter","message","read","length","Fragment","checkAvailability","endpoint","response","fetch","data","json","classes","classname","join","ExternalSyncStore","create","useSyncExternalStore","constructor","initialValue","_value","_listeners","update","value","emitChange","subscribe","listener","l","getSnapshot","store","boundSubscribe","bind","boundGetSnapshot","boundUpdate","createRoot","init","container","options","root","result","availabilityEndpoint","e","render"],"sourceRoot":""}