@seamly/web-ui 18.2.0 → 19.0.0-beta.1

package/src/javascripts/ui/components/warnings/idle-detach-warning.js

@@ -12,12 +12,8 @@ const IdleDetachWarning = () => {
   const sendActivity = useSeamlyActivityEventHandler()
   const { emitEvent } = useSeamlyCommands()
 
-  const {
-    isActive,
-    remaining,
-    timer,
-    endCountdown,
-  } = useSeamlyIdleDetachCountdown()
+  const { isActive, remaining, timer, endCountdown } =
+    useSeamlyIdleDetachCountdown()
 
   const continueChat = () => {
     sendActivity()

package/src/javascripts/ui/components/warnings/resume-conversation-prompt.js

@@ -20,7 +20,7 @@ const ResumeConversationPrompt = () => {
   return (
     <Prompt
       baseClassName="prompt"
-      title={t('resumeConversationPrompt.title', currentAgentName)}
+      title={t('resumeConversationPrompt.title', { name: currentAgentName })}
     >
       <div className={className('prompt__options')}>
         <button

package/src/javascripts/ui/components/widgets/in-out-transition.js

@@ -99,11 +99,11 @@ const InOutTransition = ({
 
   return (
     renderChildren &&
-    toChildArray(children).map(child => {
+    toChildArray(children).map((child) => {
       const { className: childClassName = '' } = child.props
       const cleanClasses = childClassName
         .split(' ')
-        .filter(cl => !transitionClassesArray.includes(cl))
+        .filter((cl) => !transitionClassesArray.includes(cl))
 
       return cloneElement(child, {
         className: [...cleanClasses, ...activeTransitionClasses].join(' '),

package/src/javascripts/ui/components/widgets/lightbox.js

@@ -4,13 +4,13 @@ import { useI18n } from '../../../domains/i18n'
 import {
   useSeamlyActivityEventHandler,
   useSeamlyAppContainerClassNames,
-  useSeamlyConfig,
 } from '../../hooks/seamly-hooks'
 import { className } from '../../../lib/css'
 import Icon from '../layout/icon'
+import { useConfig } from '../../../domains/config'
 
 const Lightbox = ({ url, description, onClose: onCloseHandler }) => {
-  const { zIndex } = useSeamlyConfig()
+  const { zIndex } = useConfig()
   const onActivityHandler = useSeamlyActivityEventHandler()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
   const focusContainer = useRef(null)
@@ -18,7 +18,7 @@ const Lightbox = ({ url, description, onClose: onCloseHandler }) => {
 
   const classNames = ['modal', ...appContainerClassNames]
 
-  const onFrameClickHandler = e => {
+  const onFrameClickHandler = (e) => {
     e.stopPropagation()
   }
 
@@ -28,7 +28,7 @@ const Lightbox = ({ url, description, onClose: onCloseHandler }) => {
 
   const style = zIndex ? { zIndex: zIndex + 1 } : undefined
 
-  const getModalContent = onClose => (
+  const getModalContent = (onClose) => (
     <div
       className={className(classNames)}
       onClick={onFloatClickHandler}

package/src/javascripts/ui/components/widgets/modal.js

@@ -42,7 +42,7 @@ const Modal = ({
 
   useEffect(() => {
     if (containerIsSet) {
-      modalContainer.current.addEventListener('keydown', event => {
+      modalContainer.current.addEventListener('keydown', (event) => {
         if ((event.code && event.code === 'Escape') || event.keyCode === 27) {
           onClose()
         }
@@ -93,12 +93,12 @@ const Modal = ({
   return typeof children === 'function'
     ? children({
         onClose,
-        modalRenderFn: els =>
+        modalRenderFn: (els) =>
           modalContainer.current && render(els, modalContainer.current),
       })
     : modalContainer.current &&
         render(
-          toChildArray(children).map(child => {
+          toChildArray(children).map((child) => {
             child.props = { ...child.props, onClose }
             return child
           }),

package/src/javascripts/ui/components/widgets/upload-progress.js

@@ -1,7 +1,7 @@
 import { className } from '../../../lib/css'
 import { useFileUploads } from '../../hooks/seamly-hooks'
 import { useI18n } from '../../../domains/i18n'
-import Icon from '../layout/icon'
+import Error from '../form-controls/error'
 
 const UploadProgress = () => {
   const { t } = useI18n()
@@ -19,24 +19,13 @@ const UploadProgress = () => {
               className={className('progress__text--percentage')}
             >{`${progress}%`}</span>
           </div>
-          <div
-            className={className('error')}
-            aria-live="assertive"
-            aria-atomic="true"
-          >
-            {error && (
-              <span>
-                <Icon name="error" size="16" />
-                {error}
-              </span>
-            )}
-          </div>
+          <Error error={error} />
           <progress
             className={className('progress__bar')}
             role="progressbar"
             aria-valuemin="0"
             aria-valuemax="100"
-            aria-label={t('fileUpload.srProgressLabel', name)}
+            aria-label={t('fileUpload.srProgressLabel', { fileName: name })}
             max="100"
             aria-valuenow={progress}
             value={progress}

package/src/javascripts/ui/hooks/component-helper-hooks.js

@@ -1,23 +1,12 @@
-import { useSeamlyConfig, useSeamlyStateContext } from './seamly-state-hooks'
+import { useSeamlyStateContext } from './seamly-state-hooks'
 import { useElementFocusingById } from './focus-helper-hooks'
+import { useConfig } from '../../domains/config'
 
 export const useSeamlyAppContainerClassNames = () => {
-  const config = useSeamlyConfig()
-  const { appContainerClassNames } = config
-
-  if (!appContainerClassNames) {
-    return []
-  }
-
-  switch (typeof config.appContainerClassNames) {
-    case 'function':
-      return config.appContainerClassNames(config)
-    default:
-      return config.appContainerClassNames
-  }
+  return useConfig().appContainerClassNames
 }
 
-export const useSeamlyMessageContainerClassNames = event => {
+export const useSeamlyMessageContainerClassNames = (event) => {
   const { fromClient } = event.payload
   const classNames = ['message']
 

package/src/javascripts/ui/hooks/file-upload-hooks.js

@@ -52,7 +52,7 @@ export const useFileUploads = () => {
   const upload = useSeamlyFileUploadContext()
 
   const uploadFile = useCallback(
-    file => {
+    (file) => {
       upload(file)
     },
     [upload],
@@ -66,7 +66,7 @@ export const useFileUploads = () => {
     uploadFile,
     clearUploads,
     currentUploads,
-    isUploading: currentUploads.some(file => file.uploading),
-    isComplete: currentUploads.every(file => file.complete),
+    isUploading: currentUploads.some((file) => file.uploading),
+    isComplete: currentUploads.every((file) => file.complete),
   }
 }

package/src/javascripts/ui/hooks/focus-helper-hooks.js

@@ -9,7 +9,7 @@ import { seamlyActions } from '../utils/seamly-utils'
 
 const { SET_SEAMLY_CONTAINER_ELEMENT } = seamlyActions
 
-const focusWithRaf = el => {
+const focusWithRaf = (el) => {
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       const focusEl = typeof el === 'string' ? document.getElementById(el) : el
@@ -24,7 +24,7 @@ export const useSeamlyContainerElement = () => {
   const dispatch = useSeamlyDispatchContext()
 
   const setSeamlyContainerElement = useCallback(
-    element => {
+    (element) => {
       dispatch({ type: SET_SEAMLY_CONTAINER_ELEMENT, element })
     },
     [dispatch],
@@ -33,7 +33,7 @@ export const useSeamlyContainerElement = () => {
   return [seamlyContainerElement, setSeamlyContainerElement]
 }
 
-export const useElementFocusingById = elementId =>
+export const useElementFocusingById = (elementId) =>
   useCallback(() => {
     focusWithRaf(elementId)
   }, [elementId])
@@ -49,7 +49,7 @@ export const useFocusIfSeamlyContainedFocus = () => {
 
   containerElementRef.current = seamlyContainerElement
 
-  return useCallback(elementToFocus => {
+  return useCallback((elementToFocus) => {
     const focusFn = () => {
       focusWithRaf(elementToFocus)
     }

package/src/javascripts/ui/hooks/live-region-hooks.js

@@ -8,7 +8,7 @@ export const useSeamlyLiveRegionContext = () =>
 export const useLiveRegion = () => {
   const sendMessage = useSeamlyLiveRegionContext()
   const sendPolite = useCallback(
-    messageText => {
+    (messageText) => {
       sendMessage({
         ariaLive: ariaLiveLevels.polite,
         messageText,
@@ -17,7 +17,7 @@ export const useLiveRegion = () => {
     [sendMessage],
   )
   const sendAssertive = useCallback(
-    messageText => {
+    (messageText) => {
       sendMessage({
         ariaLive: ariaLiveLevels.assertive,
         messageText,

package/src/javascripts/ui/hooks/seamly-api-hooks.js

@@ -22,9 +22,3 @@ export const useSeamlyHasConversation = () => {
   const url = useSeamlyConversationUrl()
   return !!url
 }
-
-export const useSeamlyHasUserResponded = () => {
-  const { get } = useSeamlyObjectStore()
-
-  return get ? !!get('userResponded') : false
-}

package/src/javascripts/ui/hooks/seamly-entry-hooks.js

@@ -1,9 +1,10 @@
 import { useRef, useCallback, useEffect } from 'preact/hooks'
 import { seamlyActions, actionTypes } from '../utils/seamly-utils'
-import { useSeamlyStateContext, useSeamlyConfig } from './seamly-state-hooks'
+import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyOptions } from './seamly-option-hooks'
 import useSeamlyCommands from './use-seamly-commands'
+import { typingTimeout } from '../../config'
 
 const {
   SET_BLOCK_AUTO_ENTRY_SWITCH,
@@ -13,19 +14,18 @@ const {
 
 export const useSeamlyTyping = () => {
   const { sendAction } = useSeamlyCommands()
-  const { typing: typingConfig } = useSeamlyConfig()
   const { features } = useSeamlyOptions()
   const { typingPeekahead } = features || {}
-  const typingTimeout = useRef(null)
-  const sendEndTypingTimeout = useRef(null)
+  const typingTimerId = useRef(null)
+  const sendEndTypingTimerId = useRef(null)
   const isTyping = useRef(false)
-  const typingInterval = useRef(null)
+  const typingIntervalId = useRef(null)
 
   useEffect(() => {
     return () => {
-      clearInterval(typingInterval.current)
-      clearTimeout(typingTimeout.current)
-      clearTimeout(sendEndTypingTimeout.current)
+      clearInterval(typingIntervalId.current)
+      clearTimeout(typingTimerId.current)
+      clearTimeout(sendEndTypingTimerId.current)
     }
   }, [])
 
@@ -43,37 +43,34 @@ export const useSeamlyTyping = () => {
     })
   }
 
-  return e => {
+  return (e) => {
     if ((e.code && e.code === 'Enter') || e.keyCode === 13) {
       return
     }
-    if (!typingConfig) {
-      return
-    }
 
     isTyping.current = true
-    if (!typingInterval.current) {
+    if (!typingIntervalId.current) {
       sendTypingState(true, e.target.value)
-      typingInterval.current = setInterval(() => {
+      typingIntervalId.current = setInterval(() => {
         if (!isTyping.current) {
-          clearInterval(typingInterval.current)
-          typingInterval.current = null
+          clearInterval(typingIntervalId.current)
+          typingIntervalId.current = null
         } else if (typingPeekahead && typingPeekahead.enabled) {
           sendTypingState(true, e.target.value)
         }
-      }, typingConfig.timeout)
+      }, typingTimeout)
     }
 
-    clearTimeout(typingTimeout.current)
-    clearTimeout(sendEndTypingTimeout.current)
+    clearTimeout(typingTimerId.current)
+    clearTimeout(sendEndTypingTimerId.current)
 
-    typingTimeout.current = setTimeout(() => {
+    typingTimerId.current = setTimeout(() => {
       isTyping.current = false
     }, 300)
 
-    sendEndTypingTimeout.current = setTimeout(() => {
+    sendEndTypingTimerId.current = setTimeout(() => {
       sendTypingState(false, e.target.value)
-    }, typingConfig.timeout)
+    }, typingTimeout)
   }
 }
 
@@ -91,21 +88,21 @@ export const useSeamlyEntry = () => {
   const activeEntryOptions = entryOptions[activeEntry] || {}
 
   const setBlockAutoEntrySwitch = useCallback(
-    value => {
+    (value) => {
       dispatch({ type: SET_BLOCK_AUTO_ENTRY_SWITCH, value })
     },
     [dispatch],
   )
 
   const setActiveEntryType = useCallback(
-    entryType => {
+    (entryType) => {
       dispatch({ type: SET_ACTIVE_ENTRY_TYPE, entryType })
     },
     [dispatch],
   )
 
   const setUserEntryType = useCallback(
-    entryType => {
+    (entryType) => {
       dispatch({ type: SET_USER_ENTRY_TYPE, entryType })
     },
     [dispatch],

package/src/javascripts/ui/hooks/seamly-hooks.js

@@ -9,8 +9,6 @@ export {
   useLastMessageEventId,
   useEntryTextLimit,
   useSeamlyCurrentAgent,
-  useSeamlyConfig,
-  useSeamlyDisclaimerState,
   useEvents,
   useSeamlyHeaderData,
   useSeamlyIsHistoryLoaded,
@@ -26,7 +24,6 @@ export {
 export {
   useSeamlyApiContext,
   useSeamlyConversationUrl,
-  useSeamlyHasUserResponded,
 } from './seamly-api-hooks'
 export { default as useSeamlyDispatchContext } from './use-seamly-dispatch'
 export {
@@ -35,7 +32,6 @@ export {
   useCobrowsingContainer,
 } from './component-helper-hooks'
 export { useSeamlyOptions, useOptionButton } from './seamly-option-hooks'
-export { default as useSeamlyInterrupt } from './use-seamly-interrupt'
 export { useFileUploadMeta, useFileUploads } from './file-upload-hooks'
 export { default as useSeamlyCommands } from './use-seamly-commands'
 export { useLiveRegion, useSeamlyLiveRegionContext } from './live-region-hooks'
@@ -68,12 +64,9 @@ export const useSeamlyEventStream = (nextFn, filterFn) => {
   useEffect(() => {
     if (api.stream) {
       if (filterFn) {
-        api
-          .stream()
-          .filter(filterFn)
-          .subscribe({
-            next: nextFn,
-          })
+        api.stream().filter(filterFn).subscribe({
+          next: nextFn,
+        })
       } else {
         api.stream().subscribe({
           next: nextFn,

package/src/javascripts/ui/hooks/seamly-option-hooks.js

@@ -24,10 +24,10 @@ export const useSeamlyOptions = () => {
   const optionsObj = { cobrowsing, sendTranscript }
 
   const menuOptions = Object.keys(optionsObj)
-    .filter(key => {
+    .filter((key) => {
       return optionsObj[key]
     })
-    .map(option => ({
+    .map((option) => ({
       name: option,
       title: t(`options.${option}.menuTitle`),
       available: optionsObj[option].enabled,
@@ -44,7 +44,7 @@ export const useSeamlyOptions = () => {
   }, [get, dispatch])
 
   const setUserSelectedOptions = useCallback(
-    optionValues => {
+    (optionValues) => {
       dispatch({ type: SET_USER_SELECTED_OPTIONS, options: optionValues })
       set('options', optionValues)
     },
@@ -63,7 +63,7 @@ export const useSeamlyOptions = () => {
     [dispatch, get, set],
   )
 
-  const showOption = optionName => {
+  const showOption = (optionName) => {
     dispatch({ type: SHOW_OPTION, optionName })
   }
 

package/src/javascripts/ui/hooks/seamly-state-hooks.js

@@ -1,19 +1,14 @@
 import { createSelector } from 'reselect'
 import { useSelector } from '../../domains/redux'
 import { microsecondsToMilliseconds } from '../utils/general-utils'
+import { Selectors as ConfigSelectors, useConfig } from '../../domains/config'
 
-export const selectState = state => state.state
+export const selectState = (state) => state.state
 export const useSeamlyStateContext = () => useSelector(selectState)
 
-export const selectConfig = createSelector(
-  selectState,
-  ({ config }) => config || {},
-)
-export const useSeamlyConfig = () => useSelector(selectConfig)
-
 export const selectEvents = createSelector(
   selectState,
-  selectConfig,
+  ConfigSelectors.selectConfig,
   ({ events }, config) => {
     const { enabled, threshold } = config?.messages?.timeIndicator ?? {}
     if (!enabled) {
@@ -53,13 +48,13 @@ export const useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents
 
 export const useSkiplink = () => useSeamlyStateContext().skiplinkTargetId
 
-export const useSeamlyParticipant = participantId =>
+export const useSeamlyParticipant = (participantId) =>
   useSeamlyStateContext().participantInfo.participants[participantId]
 
 export const useSeamlyServiceInfo = () => useSeamlyStateContext().serviceInfo
 
-const selectLastMessageEventId = createSelector(selectEvents, events => {
-  const filteredEvents = events.filter(event => event.type === 'message')
+const selectLastMessageEventId = createSelector(selectEvents, (events) => {
+  const filteredEvents = events.filter((event) => event.type === 'message')
   return filteredEvents[filteredEvents.length - 1]?.payload.id
 })
 export const useLastMessageEventId = () => useSelector(selectLastMessageEventId)
@@ -67,16 +62,13 @@ export const useLastMessageEventId = () => useSelector(selectLastMessageEventId)
 export const useSeamlyIsHistoryLoaded = () =>
   useSeamlyStateContext().historyLoaded
 
-export const useSeamlyDisclaimerState = () =>
-  useSeamlyStateContext().showDisclaimer
-
 export const useSeamlyCurrentAgent = () => {
   const { participants, currentAgent } = useSeamlyStateContext().participantInfo
 
   return currentAgent ? participants[currentAgent] : null
 }
 
-export const useSeamlyServiceData = key =>
+export const useSeamlyServiceData = (key) =>
   useSeamlyStateContext().serviceData[key]
 
 export const useEntryTextLimit = () => {
@@ -95,7 +87,7 @@ export const useEntryTextLimit = () => {
 }
 
 export const useSeamlyLayoutMode = () => {
-  const { layoutMode } = useSeamlyConfig()
+  const { layoutMode } = useConfig()
 
   return {
     isInline: layoutMode === 'inline',

package/src/javascripts/ui/hooks/use-event-component-mapping.js

@@ -2,7 +2,7 @@ import { useContext } from 'preact/hooks'
 import ComponentContext from '../components/conversation/component-context'
 import { payloadTypes } from '../utils/seamly-utils'
 
-const useEventComponentMapping = event => {
+const useEventComponentMapping = (event) => {
   const components = useContext(ComponentContext)
 
   let SubComponent = null

package/src/javascripts/ui/hooks/use-seamly-chat.js

@@ -88,6 +88,7 @@ const useSeamlyChat = () => {
     // they had been connected before.
     // We also keep track of whether connect was called before to avoid
     // multiple in-flight connection processes.
+
     if (
       (!isOpen && !hasConversation) ||
       connectCalled.current ||