@seamly/web-ui 19.0.0 → 19.1.3

package/src/javascripts/style-guide/states.js

@@ -3,7 +3,6 @@ import {
   randomId,
   SeamlyOfflineError,
   SeamlyGeneralError,
-  SeamlyConfigurationError,
 } from '@seamly/web-ui'
 import { addTranslationData } from './state-helpers'
 
@@ -21,7 +20,9 @@ const baseState = {
   isLoading: false,
   idleDetachCountdown: { hasCountdown: false, isActive: false },
   resumeConversationPrompt: false,
-  visible: visibilityStates.open,
+  visibility: {
+    visibility: visibilityStates.open,
+  },
   serviceInfo: {
     activeServiceSessionId: '',
   },
@@ -953,13 +954,37 @@ const standardState = {
     headingText: 'System messages',
     description: '',
     ...baseState,
+    config: {
+      overrideMessages: {
+        timeIndicator: {
+          enabled: true,
+          threshold: 3600000,
+        },
+      },
+    },
     participantInfo,
     events: [
+      {
+        type: 'message',
+        payload: {
+          ...shortTextMessage.payload,
+          occurredAt: (Date.now() - 86400000 * 5) * 1000,
+          id: randomId(),
+          body: {
+            text: 'Long ago when a dialog started',
+            type: 'text',
+            variables: {},
+          },
+        },
+      },
       participantMessage,
       participantMessageDefaultIcon,
       newTopicDivider,
-      infoMessage,
       transcriptInfoMessage,
+      ...[newTranslationDividerStart, newTranslationDividerStop].map(
+        addTranslationData,
+      ),
+      infoMessage,
     ],
   },
   choicePromptMessages: {
@@ -1142,34 +1167,24 @@ const standardState = {
       },
     ],
   },
-  disconnectedInterrupt: {
-    // Important: This cannot pick up the language files so the text is hard set here.
-    category: categoryKeys.errors,
-    headingText: 'Disconnected interrupt',
-    description: '',
-    ...baseState,
-    interrupt: {
-      error: new SeamlyOfflineError(),
-    },
-  },
-  generalErrorInterrupt: {
+  errorWithAction: {
     // Important: This cannot pick up the language files so the text is hard set here.
     category: categoryKeys.errors,
-    headingText: 'General error interrupt',
+    headingText: 'Error with a user action',
     description: '',
     ...baseState,
     interrupt: {
       error: new SeamlyGeneralError(),
     },
   },
-  configErrorInterrupt: {
+  errorWithoutAction: {
     // Important: This cannot pick up the language files so the text is hard set here.
     category: categoryKeys.errors,
-    headingText: 'Config error interrupt',
+    headingText: 'Error without a user action',
     description: '',
     ...baseState,
     interrupt: {
-      error: new SeamlyConfigurationError(),
+      error: new SeamlyOfflineError(),
     },
   },
   privacyDisclaimer: {
@@ -1694,6 +1709,7 @@ const standardState = {
       activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
     },
     events: [
+      newTranslationDividerStart,
       infoMessage,
       shortTextMessage,
       {
@@ -1722,6 +1738,8 @@ const standardState = {
       textMesageWithBullets,
       choicePromptMessage,
       ctaMessage,
+      newTranslationDividerStop,
+      newTranslationDividerStart,
     ].map(addTranslationData),
     translations: {
       ...translationsSlice,
@@ -1786,7 +1804,10 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
           window: {
             ...baseState,
             config: { ...baseState.config, layoutMode: 'window' },
-            visible: visibilityStates.minimized,
+            visibility: {
+              ...baseState.visibility,
+              visibility: visibilityStates.minimized,
+            },
           },
         },
         minimizedStarted: {
@@ -1796,7 +1817,10 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
           window: {
             ...baseState,
             config: { ...baseState.config, layoutMode: 'window' },
-            visible: visibilityStates.minimized,
+            visibility: {
+              ...baseState.visibility,
+              visibility: visibilityStates.minimized,
+            },
             participantInfo,
             headerTitles,
           },
@@ -1808,7 +1832,10 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
           window: {
             ...baseState,
             config: { ...baseState.config, layoutMode: 'window' },
-            visible: visibilityStates.minimized,
+            visibility: {
+              ...baseState.visibility,
+              visibility: visibilityStates.minimized,
+            },
             participantInfo,
             headerTitles,
             unreadEvents: 12,

package/src/javascripts/ui/components/conversation/conversation.js

@@ -3,7 +3,6 @@ import { className } from '../../../lib/css'
 import { useI18n } from '../../../domains/i18n'
 import {
   useSeamlyIsLoading,
-  useSeamlyVisibility,
   useSkiplink,
   useSkiplinkTargetFocusing,
 } from '../../hooks/seamly-hooks'
@@ -12,13 +11,14 @@ import Event from './event/event'
 import Loader from './loader'
 import ComponentFilter from './component-filter'
 import PrivacyDisclaimer from '../layout/privacy-disclaimer'
+import { useVisibility } from '../../../domains/visibility'
 
 const Conversation = () => {
   const { t } = useI18n()
   const appBodyContainer = useRef(null)
   const events = useEvents()
   const isLoading = useSeamlyIsLoading()
-  const { isOpen } = useSeamlyVisibility()
+  const { isOpen } = useVisibility()
   const skiplinkTargetId = useSkiplink()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
 

package/src/javascripts/ui/components/conversation/event/hooks/use-text-rendering.js

@@ -1,4 +1,3 @@
-import { useMemo } from 'preact/hooks'
 import Mustache from 'mustache'
 
 Mustache.escape = function (escapeText) {
@@ -11,7 +10,7 @@ const parseLinkVariable = (variable) => {
   }>${variable.name}</a>`
 }
 
-export function parseRichtText(text, variables = {}) {
+export function parseRichText(text, variables = {}) {
   const view = {}
   Object.entries(variables).forEach(([key, variable]) => {
     switch (variable.type) {
@@ -34,9 +33,3 @@ export function parseRichtText(text, variables = {}) {
 
   return output
 }
-
-const useTextRendering = ({ text, variables = {} }) => {
-  return useMemo(() => parseRichtText(text, variables), [text, variables])
-}
-
-export default useTextRendering

package/src/javascripts/ui/components/conversation/event/text.js

@@ -1,29 +1,35 @@
+import { useMemo } from 'preact/hooks'
 import parseBody from '../../../../lib/parse-body'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
-import useTextRendering from './hooks/use-text-rendering'
+import { parseRichText } from './hooks/use-text-rendering'
 import MessageContainer from '../message-container'
 import { useTranslatedEventData } from '../../../../domains/translations'
 
 const Text = ({ event, ...props }) => {
-  const { payload } = event
-
   const [body] = useTranslatedEventData(event)
-  const eventClick = useEventLinkClickHandler(payload.id)
-  const eventBody = useTextRendering({
-    text: parseBody(body.text),
-    variables: body.variables,
-  })
+  const eventClick = useEventLinkClickHandler(event.payload.id)
+
+  const containerProps = useMemo(() => {
+    if (!event.payload.fromClient) {
+      return {
+        bodyProps: {
+          dangerouslySetInnerHTML: {
+            __html: parseRichText(parseBody(body.text), body.variables),
+          },
+        },
+      }
+    }
+    return {
+      children: <p>{body.text}</p>,
+    }
+  }, [body, event])
   return (
     <MessageContainer
       type="text"
       event={event}
       onClick={eventClick}
       {...props}
-      bodyProps={{
-        dangerouslySetInnerHTML: {
-          __html: eventBody,
-        },
-      }}
+      {...containerProps}
     />
   )
 }

package/src/javascripts/ui/components/core/seamly-core.js

@@ -1,3 +1,4 @@
+import { useErrorBoundary } from 'preact/hooks'
 import SeamlyInstanceFunctionsLoader from './seamly-instance-functions-loader'
 import SeamlyReadState from './seamly-read-state'
 import SeamlyNewNotifications from './seamly-new-notifications'
@@ -9,8 +10,10 @@ import SeamlyEventSubscriber from './seamly-event-subscriber'
 import SeamlyFileUpload from './seamly-file-upload'
 import { SeamlyEventBusContext, SeamlyApiContext } from './seamly-api-context'
 import { StoreProvider } from '../../../domains/redux'
+import { catchError } from '../../../domains/errors'
 
 const SeamlyCore = ({ store, children, config, eventBus, api }) => {
+  useErrorBoundary((error) => store.dispatch(catchError(error)))
   return (
     <StoreProvider store={store}>
       <SeamlyEventBusContext.Provider value={eventBus}>

package/src/javascripts/ui/components/core/seamly-event-subscriber.js

@@ -179,15 +179,15 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
               switch (payload.type) {
                 case 'find_conversation_erred':
                   dispatch(
-                    InterruptActions.set(new SeamlySessionExpiredError()),
+                    InterruptActions.set(new SeamlySessionExpiredError(event)),
                   )
                   break
                 case 'seamly_offline':
-                  dispatch(InterruptActions.set(new SeamlyOfflineError()))
+                  dispatch(InterruptActions.set(new SeamlyOfflineError(event)))
                   dispatch({ type: CLEAR_EVENTS })
                   break
                 default:
-                  dispatch(InterruptActions.set(new SeamlyGeneralError()))
+                  dispatch(InterruptActions.set(new SeamlyGeneralError(event)))
                   break
               }
               break

package/src/javascripts/ui/components/core/seamly-initializer.js

@@ -1,22 +1,18 @@
 import { useEffect, useRef } from 'preact/hooks'
-import { visibilityStates } from '../../utils/seamly-utils'
-import { useSeamlyOptions, useSeamlyVisibility } from '../../hooks/seamly-hooks'
+import { useSeamlyOptions } from '../../hooks/seamly-hooks'
 import { useConfig } from '../../../domains/config'
 
 const SeamlyInitializer = () => {
   const { initUserSelectedOptions } = useSeamlyOptions()
   const seamlyInitialized = useRef(false)
-  const { setVisibility } = useSeamlyVisibility()
   const config = useConfig()
 
   useEffect(() => {
     if (config.api && !seamlyInitialized.current) {
       seamlyInitialized.current = true
       initUserSelectedOptions()
-
-      setVisibility(visibilityStates.initialize)
     }
-  }, [initUserSelectedOptions, config, setVisibility])
+  }, [initUserSelectedOptions, config])
 
   return null
 }

package/src/javascripts/ui/components/core/seamly-instance-functions-loader.js

@@ -1,18 +1,17 @@
 import { useContext, useEffect, useRef } from 'preact/hooks'
 import {
   useSeamlyCommands,
-  useSeamlyVisibility,
   useSeamlyUnreadCount,
   useSeamlyLayoutMode,
   useSeamlyConversationUrl,
   useSeamlyActivityEventHandler,
   useSeamlyApiContext,
 } from '../../hooks/seamly-hooks'
-import { visibilityStates } from '../../utils/seamly-utils'
 import { SeamlyEventBusContext } from './seamly-api-context'
 import { useTranslations } from '../../../domains/translations'
 import { useInterrupt } from '../../../domains/interrupt'
 import { useConfig } from '../../../domains/config'
+import { visibilityStates, useVisibility } from '../../../domains/visibility'
 
 function useSeamlyInstanceFunction(functionName, fn, deps = []) {
   const eventBus = useContext(SeamlyEventBusContext)
@@ -34,7 +33,7 @@ function useSeamlyInstanceFunction(functionName, fn, deps = []) {
 const SeamlyInstanceFunctionsLoader = () => {
   const config = useConfig()
   const { sendMessage, sendContext, sendAction } = useSeamlyCommands()
-  const { setVisibility, visible } = useSeamlyVisibility()
+  const { setVisibility, visible } = useVisibility()
   const currentVisibility = useRef(visible)
   const eventBus = useContext(SeamlyEventBusContext)
   const api = useSeamlyApiContext()

package/src/javascripts/ui/components/core/seamly-new-notifications.js

@@ -3,11 +3,11 @@ import { useI18n } from '../../../domains/i18n'
 import {
   useEvents,
   useLiveRegion,
-  useSeamlyVisibility,
   useSeamlyIsHistoryLoaded,
 } from '../../hooks/seamly-hooks'
 import { newMessageScreenReaderWait } from '../../../config'
 import { debounce } from '../../utils/general-utils'
+import { useVisibility } from '../../../domains/visibility'
 
 const SeamlyNewNotifications = () => {
   const { t } = useI18n()
@@ -16,7 +16,7 @@ const SeamlyNewNotifications = () => {
   const previousServerEventCount = useRef(0)
   const isHistoryLoaded = useSeamlyIsHistoryLoaded()
   const { sendPolite } = useLiveRegion()
-  const { isOpen } = useSeamlyVisibility()
+  const { isOpen } = useVisibility()
   const prevIsOpen = useRef(null)
   const debounceFunc = useRef(null)
 

package/src/javascripts/ui/components/core/seamly-read-state.js

@@ -2,7 +2,6 @@ import { useEffect, useRef, useMemo } from 'preact/hooks'
 
 import {
   useEvents,
-  useSeamlyVisibility,
   useSeamlyCommands,
   useLiveRegion,
   useSeamlyUnreadCount,
@@ -17,6 +16,7 @@ import {
 } from '../../utils/seamly-utils'
 import { debounce } from '../../utils/general-utils'
 import { unreadScreenReaderWait } from '../../../config'
+import { useVisibility } from '../../../domains/visibility'
 
 const { SET_EVENTS_READ } = seamlyActions
 
@@ -24,7 +24,7 @@ const SeamlyReadState = () => {
   const { t } = useI18n()
   const events = useEvents()
   const dispatch = useSeamlyDispatchContext()
-  const { isOpen, isVisible } = useSeamlyVisibility()
+  const { isOpen, isVisible } = useVisibility()
   const { sendAction } = useSeamlyCommands()
   const unreadCount = useSeamlyUnreadCount()
   const { sendPolite } = useLiveRegion()

package/src/javascripts/ui/components/entry/toggle-button.js

@@ -2,7 +2,6 @@ import { useLayoutEffect, useRef } from 'preact/hooks'
 import { useI18n } from '../../../domains/i18n'
 import { className } from '../../../lib/css'
 import {
-  useSeamlyVisibility,
   useSkiplinkTargetFocusing,
   useFocusIfSeamlyContainedFocus,
   useSeamlyCurrentAgent,
@@ -11,11 +10,12 @@ import {
   useSeamlyStateContext,
 } from '../../hooks/seamly-hooks'
 import { useInterrupt } from '../../../domains/interrupt'
+import { useVisibility } from '../../../domains/visibility'
 
 const ToggleButton = ({ onOpenChat }) => {
   const { t } = useI18n()
   const titleId = useGeneratedId()
-  const { isOpen } = useSeamlyVisibility()
+  const { isOpen } = useVisibility()
   const prevIsOpen = useRef(null)
   const buttonRef = useRef(null)
   const lastEventRef = useRef()

package/src/javascripts/ui/components/layout/agent-info.js

@@ -2,19 +2,19 @@ import Icon from './icon'
 import {
   useSeamlyHeaderData,
   useSeamlyUnreadCount,
-  useSeamlyVisibility,
   useSeamlyCurrentAgent,
 } from '../../hooks/seamly-hooks'
 import { className } from '../../../lib/css'
 import { useI18n } from '../../../domains/i18n'
 import { useInterrupt } from '../../../domains/interrupt'
 import { useConfig } from '../../../domains/config'
+import { useVisibility } from '../../../domains/visibility'
 
 const AgentInfo = () => {
   const { t } = useI18n()
   const { title, subTitle } = useSeamlyHeaderData()
   const unreadMessageCount = useSeamlyUnreadCount()
-  const { isOpen } = useSeamlyVisibility()
+  const { isOpen } = useVisibility()
   const currentAgent = useSeamlyCurrentAgent()
   const { hasInterrupt } = useInterrupt()
   const { defaults } = useConfig()

package/src/javascripts/ui/components/layout/app-frame.js

@@ -2,19 +2,18 @@ import { useCallback, useMemo } from 'preact/hooks'
 import { className } from '../../../lib/css'
 import {
   useSeamlyAppContainerClassNames,
-  useSeamlyVisibility,
   useSeamlyLayoutMode,
   useSeamlyContainerElement,
 } from '../../hooks/seamly-hooks'
 import Faq from '../faq/faq'
-import { visibilityStates } from '../../utils/seamly-utils'
 import { useConfig } from '../../../domains/config'
 import { useUserHasResponded } from '../../../domains/app'
 import { useI18n } from '../../../domains/i18n'
+import { useVisibility, visibilityStates } from '../../../domains/visibility'
 
 const AppFrame = ({ children }) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
-  const { isOpen, isVisible, setVisibility } = useSeamlyVisibility()
+  const { isOpen, isVisible, setVisibility } = useVisibility()
   const { zIndex, showFaq } = useConfig()
   const { isModal, isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()

package/src/javascripts/ui/components/layout/chat-frame.js

@@ -1,13 +1,13 @@
 import { className } from '../../../lib/css'
-import { useSeamlyVisibility } from '../../hooks/seamly-hooks'
 import CobrowsingActiveFrame from '../warnings/cobrowsing-active-frame'
 import AppOptions from '../app-options'
 import { ChatStatus as TranslationsChatStatus } from '../../../domains/translations'
 import { useInterrupt } from '../../../domains/interrupt'
+import { useVisibility } from '../../../domains/visibility'
 
 function ChatFrame({ children, interruptComponent: InterruptComponent }) {
   const { hasInterrupt, meta } = useInterrupt()
-  const { isOpen } = useSeamlyVisibility()
+  const { isOpen } = useVisibility()
 
   const getContent = () => {
     if (hasInterrupt) {

package/src/javascripts/ui/components/layout/modal-wrapper.js

@@ -3,19 +3,16 @@ import { createFocusTrap } from 'focus-trap'
 import InOutTransition, {
   transitionStartStates,
 } from '../widgets/in-out-transition'
-import {
-  useSeamlyLayoutMode,
-  useSeamlyVisibility,
-} from '../../hooks/seamly-hooks'
+import { useSeamlyLayoutMode } from '../../hooks/seamly-hooks'
 import { useI18n } from '../../../domains/i18n'
 import { className } from '../../../lib/css'
 import { createAriaHider } from '../../utils/general-utils'
-import { visibilityStates } from '../../utils/seamly-utils'
+import { useVisibility, visibilityStates } from '../../../domains/visibility'
 
 const ModalWrapper = ({ children }) => {
   const { t } = useI18n()
   const { isModal } = useSeamlyLayoutMode()
-  const { isOpen, setVisibility } = useSeamlyVisibility()
+  const { isOpen, setVisibility } = useVisibility()
   const container = useRef(null)
   const focusTrap = useRef(null)
 

package/src/javascripts/ui/components/layout/view.js

@@ -7,14 +7,11 @@ import Header from './header'
 import Conversation from '../conversation/conversation'
 import EntryContainer from '../entry/entry-container'
 import Interrupt from './interrupt'
-import {
-  useSeamlyChat,
-  useSeamlyVisibility,
-  useSeamlyLayoutMode,
-} from '../../hooks/seamly-hooks'
+import { useSeamlyChat, useSeamlyLayoutMode } from '../../hooks/seamly-hooks'
+import { useVisibility } from '../../../domains/visibility'
 
 const View = () => {
-  const { isVisible } = useSeamlyVisibility()
+  const { isVisible } = useVisibility()
   const { openChat, closeChat } = useSeamlyChat()
   const { isModal } = useSeamlyLayoutMode()
 

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

@@ -49,8 +49,6 @@ export {
   useSeamlyContainerElement,
 } from './focus-helper-hooks'
 export { default as useSeamlyChat } from './use-seamly-chat'
-export { default as useSeamlyStoredVisibility } from './use-seamly-stored-visibility'
-export { default as useSeamlyVisibility } from './use-seamly-visibility'
 export { default as useSeamlyIdleDetachCountdown } from './use-seamly-idle-detach-countdown'
 export { default as useSeamlyResumeConversationPrompt } from './use-seamly-resume-conversation-prompt'
 

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

@@ -5,14 +5,14 @@ import { useEvents } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
 import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useLiveRegion } from './live-region-hooks'
-import useSeamlyVisibility from './use-seamly-visibility'
-import { seamlyActions, visibilityStates } from '../utils/seamly-utils'
+import { seamlyActions } from '../utils/seamly-utils'
+import { useVisibility, visibilityStates } from '../../domains/visibility'
 
 const { SET_IS_LOADING } = seamlyActions
 
 const useSeamlyChat = () => {
   const { t } = useI18n()
-  const { isOpen, isVisible, visible, setVisibility } = useSeamlyVisibility()
+  const { isOpen, isVisible, setVisibility } = useVisibility()
   const dispatch = useSeamlyDispatchContext()
   const events = useEvents()
   const spinnerTimeout = useRef(null)
@@ -52,8 +52,6 @@ const useSeamlyChat = () => {
     prevIsVisible.current = isVisible
   }, [isOpen, isVisible, sendAssertive, t])
 
-  useEffect(() => {}, [visible, sendAssertive])
-
   useEffect(() => {
     // This delays the start of the loading inidicator we set when we initialise
     // the application. This is done to only avoid BSOD on initial load if DCX is slow.

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

@@ -3,32 +3,24 @@ import {
   useSeamlyApiContext,
   useSeamlyHasConversation,
 } from './seamly-api-hooks'
-import {
-  useSeamlyStateContext,
-  useSeamlyUnreadCount,
-} from './seamly-state-hooks'
+import { useSeamlyUnreadCount } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { SeamlyEventBusContext } from '../components/core/seamly-api-context'
 import { randomId } from '../../lib/id'
 import { userParticipantId } from '../../config'
-import { sanitizeText } from '../utils/general-utils'
 import { actionTypes, seamlyActions } from '../utils/seamly-utils'
 import { useStableCallback } from './utility-hooks'
 import { Actions as InterruptActions } from '../../domains/interrupt'
 import { useConfig } from '../../domains/config'
-import { useUserHasResponded } from '../../domains/app'
+import { useUserHasResponded, Actions as AppActions } from '../../domains/app'
+import { useVisibility } from '../../domains/visibility'
 
 const {
   ADD_EVENT,
-  CLEAR_EVENTS,
   SET_IS_LOADING,
-  CLEAR_PARTICIPANTS,
   SET_HEADER_SUB_TITLE,
   SET_INITIAL_STATE,
-  CLEAR_FEATURES,
   SET_FEATURES,
-  RESET_UPLOAD_STATE,
-  RESET_ENTRY_STATE,
 } = seamlyActions
 
 const useSeamlyCommands = () => {
@@ -39,7 +31,7 @@ const useSeamlyCommands = () => {
 
   const hasResponded = useUserHasResponded()
   const hasConversation = useSeamlyHasConversation()
-  const { visible: visibility } = useSeamlyStateContext()
+  const { visible: visibility } = useVisibility()
   const unreadMessageCount = useSeamlyUnreadCount()
 
   const emitEvent = useCallback(
@@ -75,18 +67,13 @@ const useSeamlyCommands = () => {
   ])
 
   const reset = useCallback(async () => {
+    dispatch(AppActions.reset())
     dispatch(InterruptActions.clear())
-    dispatch({ type: CLEAR_EVENTS })
+
     dispatch({
       type: SET_IS_LOADING,
       isLoading: true,
     })
-    dispatch({
-      type: CLEAR_PARTICIPANTS,
-    })
-    dispatch({ type: RESET_UPLOAD_STATE })
-    dispatch({ type: RESET_ENTRY_STATE })
-    dispatch({ type: CLEAR_FEATURES })
 
     const { agentName } = appConfig.defaults || {}
 
@@ -143,20 +130,11 @@ const useSeamlyCommands = () => {
         ...config,
       }
 
-      const sanitizedText = sanitizeText(body)
-
-      const sanitizedMessage = {
-        ...message,
-        body: {
-          text: sanitizedText,
-        },
-      }
-
       api.send('message', message)
       emitEvent('message', message)
       dispatch({
         type: ADD_EVENT,
-        event: { type: 'message', payload: sanitizedMessage },
+        event: { type: 'message', payload: message },
       })
     },
     [api, dispatch, emitEvent, getTextMessageBase],

package/src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js

@@ -10,7 +10,7 @@ import {
 } from '../utils/general-utils'
 import { actionTypes, seamlyActions } from '../utils/seamly-utils'
 import { screenReaderDebounceDelaySeconds } from '../../config'
-import useSeamlyVisibility from './use-seamly-visibility'
+import { useVisibility } from '../../domains/visibility'
 
 const {
   CLEAR_IDLE_DETACH_COUNTDOWN,
@@ -24,7 +24,7 @@ const useSeamlyIdleDetachCountdown = () => {
 
   const { idleDetachCountdown } = useSeamlyStateContext()
 
-  const { isOpen: isSeamlyOpen } = useSeamlyVisibility()
+  const { isOpen: isSeamlyOpen } = useVisibility()
 
   const stableState = useRef({})