@seamly/web-ui 20.8.1 → 21.0.1-beta.1

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

@@ -0,0 +1,340 @@
+import { useContext, useEffect, useRef } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
+import SeamlyGeneralError from 'api/errors/seamly-general-error'
+import SeamlyOfflineError from 'api/errors/seamly-offline-error'
+import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
+import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
+import {
+  useEvents,
+  useSeamlyApiContext,
+  useSeamlyCommands,
+  useSeamlyIdleDetachCountdown,
+} from 'ui/hooks/seamly-hooks'
+import { featureKeys } from 'ui/utils/seamly-utils'
+import { setHasResponded } from 'domains/app/slice'
+import { clearInterrupt, setInterrupt } from 'domains/interrupt/slice'
+import {
+  ackEvent,
+  addEvent,
+  clearEvents,
+  initResumeConversationPrompt,
+  setActiveService,
+  setFeatureEnabledState,
+  setHeaderSubTitle,
+  setHistory,
+  setIsLoading,
+  setParticipant,
+  setServiceDataItem,
+  setServiceEntryMetadata,
+} from 'domains/store/slice'
+import type { AckEvent, ChannelEvent } from 'domains/store/store.types'
+import { setTranslationProposalPrompt } from 'domains/translations/slice'
+
+const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video']
+
+const SeamlyEventSubscriber = () => {
+  const api = useSeamlyApiContext()
+
+  const dispatch = useDispatch()
+  const events = useEvents()
+  const eventBus = useContext(SeamlyEventBusContext)
+  const prevEmittedEventId = useRef(null)
+  const { initCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
+  const { emitEvent } = useSeamlyCommands()
+
+  useEffect(() => {
+    if (api.connectionInfo && api.conversation.socket) {
+      const { socket } = api.conversation
+      socket.onError((err) => {
+        const seamlyOfflineError = new SeamlyOfflineError(err)
+        dispatch(
+          setInterrupt({
+            name: seamlyOfflineError.name,
+            message: seamlyOfflineError.message,
+            langKey: seamlyOfflineError.langKey,
+            originalEvent: seamlyOfflineError.originalEvent,
+            originalError: seamlyOfflineError.originalError,
+          }),
+        )
+        dispatch(clearEvents())
+      })
+
+      socket.onOpen(() => {
+        dispatch(clearInterrupt())
+      })
+    }
+  }, [api, api.connectionInfo, api.conversation.socket, dispatch])
+
+  useEffect(() => {
+    if (api.connectionInfo && api.conversation.channel) {
+      const { channel } = api.conversation
+      return () => {
+        channel?.leave()
+      }
+    }
+    return () => {}
+  }, [api, api.connectionInfo, api.conversation])
+
+  useEffect(() => {
+    api.conversation.onConnection((connectionState) => {
+      if (connectionState === 'join_channel_erred') {
+        const seamlyGeneralError = new SeamlyGeneralError()
+        dispatch(
+          setInterrupt({
+            name: seamlyGeneralError.name,
+            message: seamlyGeneralError.message,
+            langKey: seamlyGeneralError.langKey,
+            originalEvent: seamlyGeneralError.originalEvent,
+            originalError: seamlyGeneralError.originalError,
+            action: seamlyGeneralError.action,
+          }),
+        )
+      }
+    })
+  }, [api.conversation, dispatch])
+
+  useEffect(() => {
+    if (api.connectionInfo && api.conversation.channel) {
+      const { channel } = api.conversation
+
+      const updateParticipant = (event) => {
+        const { payload } = event
+
+        if (!payload || !payload.participant) {
+          return
+        }
+
+        const { fromClient, participant } = payload
+
+        if (
+          !fromClient &&
+          typeof participant !== 'string' &&
+          participant?.name
+        ) {
+          dispatch(setHeaderSubTitle(participant.name))
+        }
+
+        dispatch(
+          setParticipant({
+            participant,
+            fromClient,
+          }),
+        )
+
+        if (typeof participant !== 'string' && participant.introduction) {
+          dispatch(
+            addEvent({
+              ...event,
+              payload: {
+                ...payload,
+                type: 'participant',
+              },
+            }),
+          )
+        }
+      }
+
+      channel.onMessage = (type, payload) => {
+        const event = { type, payload }
+
+        switch (type) {
+          case 'ui':
+            if (payload.state && payload.state.hasOwnProperty('loading')) {
+              dispatch(setIsLoading(payload.state.loading))
+            }
+            switch (payload.type) {
+              case 'idle_detach_countdown':
+                initCountdown(payload.body.duration)
+                break
+              case 'idle_detach_countdown_elapsed':
+                endCountdown(undefined, true)
+                break
+              case 'resume_conversation_prompt':
+                dispatch(initResumeConversationPrompt())
+                break
+              case 'translation_proposal':
+                dispatch(setTranslationProposalPrompt(payload.body))
+                break
+              case 'user_first_response':
+                dispatch(setHasResponded(true))
+                // @ts-ignore
+                eventBus.emit('system.userFirstResponse', payload.body)
+                break
+            }
+            break
+          case 'message':
+            updateParticipant(payload)
+            switch (payload.type) {
+              case 'text':
+              case 'choice_prompt':
+              case 'splash':
+              case 'image':
+              case 'upload':
+              case 'video':
+              case 'cta':
+              case 'custom':
+              case 'carousel':
+              case 'card':
+                if (payload.service && payload.service.serviceSessionId) {
+                  dispatch(setActiveService(payload.service.serviceSessionId))
+                }
+
+                dispatch(addEvent(event as ChannelEvent))
+                break
+            }
+            break
+          case 'participant':
+            updateParticipant(event)
+            break
+          case 'service_data':
+            if (payload.persist) {
+              dispatch(setServiceDataItem(payload))
+            }
+            break
+          case 'ack':
+            dispatch(ackEvent(event as AckEvent))
+            break
+          case 'system':
+            if (payload.type === 'service_changed') {
+              const { serviceSettings, ...eventPayload } = payload
+              const { entry } = serviceSettings
+              const { upload } = entry.options
+
+              dispatch(
+                setFeatureEnabledState({
+                  key: featureKeys.uploads,
+                  enabled: !!(upload && upload.enabled),
+                }),
+              )
+
+              dispatch(setServiceEntryMetadata(entry))
+              if (payload.serviceSessionId) {
+                dispatch(setActiveService(payload.serviceSessionId))
+              }
+
+              emitEvent('system.serviceChanged', eventPayload)
+            }
+            break
+          case 'info':
+            if (
+              payload.type === 'divider' ||
+              payload.type === 'text' ||
+              payload.type === 'translation'
+            ) {
+              dispatch(addEvent(event as ChannelEvent))
+            }
+            break
+          case 'error':
+            switch (payload.type) {
+              case 'find_conversation_erred':
+                const seamlySessionExpiredError = new SeamlySessionExpiredError(
+                  event,
+                )
+                dispatch(
+                  setInterrupt({
+                    name: seamlySessionExpiredError.name,
+                    action: seamlySessionExpiredError.action,
+                    message: seamlySessionExpiredError.message,
+                    originalEvent: seamlySessionExpiredError.originalEvent,
+                    originalError: seamlySessionExpiredError.originalError,
+                  }),
+                )
+                break
+              case 'conversation_erred':
+                const seamlyGeneralError = new SeamlyGeneralError(event)
+                dispatch(
+                  setInterrupt({
+                    name: seamlyGeneralError.name,
+                    message: seamlyGeneralError.message,
+                    langKey: seamlyGeneralError.langKey,
+                    originalEvent: seamlyGeneralError.originalEvent,
+                    originalError: seamlyGeneralError.originalError,
+                    action: seamlyGeneralError.action,
+                  }),
+                )
+                break
+            }
+        }
+
+        return payload
+      }
+    }
+  }, [
+    api,
+    api.connectionInfo,
+    api.conversation.channel,
+    dispatch,
+    emitEvent,
+    endCountdown,
+    eventBus,
+    initCountdown,
+  ])
+
+  useEffect(() => {
+    if (api.connectionInfo && api.conversation.channel) {
+      const { channel } = api.conversation
+
+      channel.on('message', (payload) => {
+        if (!EMITTABLE_MESSAGE_TYPES.includes(payload.type)) {
+          return payload
+        }
+
+        // This check dedupes the sending of messages via
+        // the bus if a duplicate connection exists in an
+        // error situation.
+        if (payload.id !== prevEmittedEventId.current) {
+          // @ts-ignore
+          eventBus.emit('message', payload)
+        }
+        prevEmittedEventId.current = payload.id
+        return payload
+      })
+    }
+  }, [api, api.connectionInfo, api.conversation.channel, eventBus])
+
+  useEffect(() => {
+    if (api.connectionInfo && api.conversation.channel) {
+      const { channel } = api.conversation
+
+      const syncChannelRef = channel.on('sync', (payload) => {
+        const lastEvent = events[events.length - 1]
+        const payloadLastEventId = payload?.lastEvent?.id
+
+        if (lastEvent && payloadLastEventId === lastEvent.payload.id) {
+          return payload
+        }
+
+        return api
+          .getConversation()
+          .then((history) => {
+            if (!history) {
+              return
+            }
+            dispatch(setHistory(history))
+          })
+          .catch((error) => {
+            dispatch(
+              setInterrupt({
+                name: error?.name,
+                message: error?.message,
+                langKey: error?.langKey,
+                action: error?.action,
+                originalEvent: error?.originalEvent,
+                originalError: error?.originalError,
+              }),
+            )
+          })
+      })
+
+      return () => {
+        channel.off('sync', syncChannelRef)
+      }
+    }
+
+    return () => undefined
+  }, [api, api.connectionInfo, api.conversation.channel, events, dispatch])
+
+  return null
+}
+
+export default SeamlyEventSubscriber

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

@@ -1,3 +1,5 @@
+import { useDispatch } from 'react-redux'
+import { useSeamlyApiContext, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import {
   registerUpload,
@@ -6,8 +8,6 @@ import {
   setUploadProgress,
 } from 'domains/store/slice'
 import { randomId } from 'lib/id'
-import { useDispatch } from 'react-redux'
-import { useSeamlyApiContext, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import SeamlyFileUploadContext from './seamly-file-upload-context'
 
 const SeamlyFileUpload = ({ children }) => {

package/src/javascripts/ui/components/core/seamly-idle-detach-counter.js

@@ -1,5 +1,5 @@
-import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
 import useInterval from 'ui/hooks/use-interval'
+import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
 
 const SeamlyIdleDetachCounter = () => {
   const { hasCountdown, isActive, remaining, decrementCountdown } =

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

@@ -1,18 +1,21 @@
 import { useContext, useEffect, useRef } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
+import { userParticipantId } from 'config'
 import {
-  useSeamlyCommands,
-  useSeamlyUnreadCount,
-  useSeamlyLayoutMode,
-  useSeamlyConversationUrl,
   useSeamlyActivityEventHandler,
   useSeamlyApiContext,
+  useSeamlyCommands,
+  useSeamlyConversationUrl,
+  useSeamlyLayoutMode,
+  useSeamlyUnreadCount,
 } from 'ui/hooks/seamly-hooks'
-import { actionTypes } from 'ui/utils/seamly-utils'
-import { useTranslations } from 'domains/translations/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { actionTypes, sourceTypes } from 'ui/utils/seamly-utils'
 import { useConfig } from 'domains/config/hooks'
-import { useVisibility } from 'domains/visibility/hooks'
+import { updateConfig } from 'domains/config/slice'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useTranslations } from 'domains/translations/hooks'
 import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
 import { SeamlyEventBusContext } from './seamly-api-context'
 
 function useSeamlyInstanceFunction(functionName, fn, deps = []) {
@@ -35,6 +38,7 @@ function useSeamlyInstanceFunction(functionName, fn, deps = []) {
 const SeamlyInstanceFunctionsLoader = () => {
   const config = useConfig()
   const { sendMessage, sendContext, sendAction } = useSeamlyCommands()
+  const dispatch = useDispatch()
   const { setVisibility, visible } = useVisibility()
   const currentVisibility = useRef(visible)
   const eventBus = useContext(SeamlyEventBusContext)
@@ -101,11 +105,20 @@ const SeamlyInstanceFunctionsLoader = () => {
   )
   useSeamlyInstanceFunction(
     'setTopic',
-    ({ name, fallbackMessage }) => {
+    ({ name, fallbackMessage, userTriggered }) => {
+      if (userTriggered) {
+        dispatch(updateConfig({ showSuggestions: false }))
+      }
+
       if (name && fallbackMessage) {
+        const participant = userTriggered ? userParticipantId : undefined
         sendAction({
           type: actionTypes.setTopic,
-          body: { name, fallbackMessage },
+          body: {
+            name,
+            fallbackMessage,
+            participant,
+          },
         })
       } else {
         console.warn(
@@ -120,7 +133,7 @@ const SeamlyInstanceFunctionsLoader = () => {
     'setTranslation',
     ({ enabled, locale }) => {
       if (enabled) {
-        enableTranslations(locale)
+        enableTranslations(locale, sourceTypes.windowApi)
       } else {
         disableTranslations()
       }

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

@@ -1,14 +1,14 @@
 import {
-  useState,
-  useEffect,
-  useRef,
   useCallback,
   useContext,
+  useEffect,
+  useRef,
+  useState,
 } from 'preact/hooks'
 import { ariaLiveLevels } from 'ui/utils/seamly-utils'
 import { className } from 'lib/css'
-import { SeamlyLiveRegionContext } from './seamly-live-region-context'
 import { SeamlyEventBusContext } from './seamly-api-context'
+import { SeamlyLiveRegionContext } from './seamly-live-region-context'
 
 const SeamlyLiveRegion = ({ children }) => {
   const eventBus = useContext(SeamlyEventBusContext)

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

@@ -1,12 +1,12 @@
-import { useEffect, useRef, useMemo } from 'preact/hooks'
-import { useI18n } from 'domains/i18n/hooks'
+import { useEffect, useMemo, useRef } from 'preact/hooks'
+import { newMessageScreenReaderWait } from 'config'
 import {
   useEvents,
   useLiveRegion,
   useSeamlyIsHistoryLoaded,
 } from 'ui/hooks/seamly-hooks'
-import { newMessageScreenReaderWait } from 'config'
 import { debounce } from 'ui/utils/general-utils'
+import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 
 const SeamlyNewNotifications = () => {

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

@@ -1,24 +1,13 @@
 import { useEffect, useMemo, useRef } from 'preact/hooks'
 import { unreadScreenReaderWait } from 'config'
+import { useLiveRegion, useSeamlyUnreadCount } from 'ui/hooks/seamly-hooks'
+import { debounce } from 'ui/utils/general-utils'
 import { useI18n } from 'domains/i18n/hooks'
-import { isUnreadMessage, setEventsRead } from 'domains/store/slice'
 import { useVisibility } from 'domains/visibility/hooks'
-import {
-  useEvents,
-  useLiveRegion,
-  useSeamlyCommands,
-  useSeamlyUnreadCount,
-} from 'ui/hooks/seamly-hooks'
-import { debounce } from 'ui/utils/general-utils'
-import { actionTypes, readStates } from 'ui/utils/seamly-utils'
-import { useDispatch } from 'react-redux'
 
 const SeamlyReadState = () => {
   const { t } = useI18n()
-  const events = useEvents()
-  const dispatch = useDispatch()
   const { isOpen, isVisible } = useVisibility()
-  const { sendAction } = useSeamlyCommands()
   const unreadCount = useSeamlyUnreadCount()
   const { sendPolite } = useLiveRegion()
   const sendLive = useMemo(
@@ -29,26 +18,6 @@ const SeamlyReadState = () => {
   const prevIsVisible = useRef(null)
   const cancelSend = useRef(null)
 
-  useEffect(() => {
-    if (!isOpen) {
-      return
-    }
-
-    const unread = events
-      .filter((event) => {
-        return (
-          isUnreadMessage(event) &&
-          event.payload.messageStatus === readStates.received
-        )
-      })
-      .map((event) => event.payload.id)
-
-    if (unread.length > 0) {
-      dispatch(setEventsRead(unread))
-      sendAction({ type: actionTypes.read, events: unread })
-    }
-  }, [events, dispatch, isOpen, sendAction])
-
   useEffect(() => {
     if (
       prevIsVisible.current !== isVisible &&

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

@@ -1,16 +1,16 @@
 import { useLayoutEffect, useRef } from 'preact/hooks'
-import { useI18n } from 'domains/i18n/hooks'
-import { className } from 'lib/css'
 import {
-  useSkiplinkTargetFocusing,
   useFocusIfSeamlyContainedFocus,
+  useGeneratedId,
   useSeamlyCurrentAgent,
   useSeamlyHeaderData,
-  useGeneratedId,
   useSeamlyStateContext,
+  useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n/hooks'
 import { useInterrupt } from 'domains/interrupt/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
 
 // Deprecated Toggle Button, should be removed once it is removed from clients
 const DeprecatedToggleButton = ({ onOpenChat }) => {

package/src/javascripts/ui/components/entry/entry-container.js

@@ -1,21 +1,21 @@
-import { useEffect, useRef, useState, useCallback } from 'preact/hooks'
-import { className } from 'lib/css'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import IdleDetachWarning from 'ui/components/warnings/idle-detach-warning'
+import ResumeConversationPrompt from 'ui/components/warnings/resume-conversation-prompt'
+import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
 import {
+  useFileUploadMeta,
   useSeamlyIdleDetachCountdown,
   useSeamlyResumeConversationPrompt,
   useSkiplinkTargetFocusing,
-  useFileUploadMeta,
 } from 'ui/hooks/seamly-hooks'
-import { entryTypes } from 'ui/utils/seamly-utils'
 import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
-import IdleDetachWarning from 'ui/components/warnings/idle-detach-warning'
-import ResumeConversationPrompt from 'ui/components/warnings/resume-conversation-prompt'
+import { entryTypes } from 'ui/utils/seamly-utils'
 import { useConfig } from 'domains/config/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
-import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
+import { className } from 'lib/css'
 import TextEntry from './text-entry'
-import UploadToggle from './upload-toggle'
 import Upload from './upload'
+import UploadToggle from './upload-toggle'
 
 const EntryContainer = () => {
   const { isOpen } = useVisibility()

package/src/javascripts/ui/components/entry/text-entry/hooks.js

@@ -1,10 +1,10 @@
-import { maxCharacterSrDebounceDelay, maxCharacterWarningLimit } from 'config'
-import { useFormControl } from 'domains/forms/hooks'
-import { useI18n } from 'domains/i18n/hooks'
 import { useEffect, useMemo } from 'preact/hooks'
+import { maxCharacterSrDebounceDelay, maxCharacterWarningLimit } from 'config'
 import { useLiveRegion } from 'ui/hooks/live-region-hooks'
 import { useEntryTextLimit } from 'ui/hooks/seamly-state-hooks'
 import { debounce } from 'ui/utils/general-utils'
+import { useFormControl } from 'domains/forms/hooks'
+import { useI18n } from 'domains/i18n/hooks'
 
 export function useCharacterLimit(controlName) {
   const { t } = useI18n()

package/src/javascripts/ui/components/entry/text-entry/index.js

@@ -1,12 +1,12 @@
-import FormProvider from 'domains/forms/provider'
-import { visibilityStates } from 'domains/visibility/constants'
-import { useVisibility } from 'domains/visibility/hooks'
 import { useCallback } from 'preact/hooks'
 import {
   useSeamlyCommands,
   useSkiplink,
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
+import FormProvider from 'domains/forms/provider'
+import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
 import TextEntryForm from './text-entry-form'
 
 const controlName = 'textMessageEntry'

package/src/javascripts/ui/components/entry/text-entry/text-entry-form.js

@@ -1,12 +1,12 @@
-import { useFormControl } from 'domains/forms/hooks'
-import { useI18n } from 'domains/i18n/hooks'
-import { className } from 'lib/css'
 import { useCallback, useLayoutEffect, useMemo } from 'preact/hooks'
 import Form from 'ui/components/form-controls/form'
 import Input from 'ui/components/form-controls/input'
 import Icon from 'ui/components/layout/icon'
-import { useLiveRegion, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import { useSeamlyEntry, useSeamlyTyping } from 'ui/hooks/seamly-entry-hooks'
+import { useLiveRegion, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
+import { useFormControl } from 'domains/forms/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 import { useCharacterLimit } from './hooks'
 
 export default function TextEntryForm({ controlName, skipLinkId }) {

package/src/javascripts/ui/components/entry/upload/file-upload-form.js

@@ -1,8 +1,8 @@
-import { className } from 'lib/css'
-import Form from 'ui/components/form-controls/form'
 import FileInput from 'ui/components/form-controls/file-input'
-import { useI18n } from 'domains/i18n/hooks'
+import Form from 'ui/components/form-controls/form'
 import { useFormControl } from 'domains/forms/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 
 export default function FileInputForm({
   skiplinkId,

package/src/javascripts/ui/components/entry/upload/index.js

@@ -1,8 +1,6 @@
-import FormProvider from 'domains/forms/provider'
-import { useI18n } from 'domains/i18n/hooks'
-import { className } from 'lib/css'
 import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
 import UploadProgress from 'ui/components/widgets/upload-progress'
+import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
 import {
   useFileUploadMeta,
   useFileUploads,
@@ -11,7 +9,6 @@ import {
   useSkiplink,
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
-import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
 import useSingleFileUpload from 'ui/hooks/use-single-file-upload'
 import { getValidator } from 'ui/utils/form-utils'
 import { formatBytes } from 'ui/utils/general-utils'
@@ -19,6 +16,9 @@ import {
   fileListObjectIsNotEmpty,
   validateFileSize,
 } from 'ui/utils/validations'
+import FormProvider from 'domains/forms/provider'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 import FileInputForm from './file-upload-form'
 
 const formName = 'fileListForm'
@@ -54,7 +54,7 @@ const Upload = () => {
   useEffect(() => {
     if (
       prevContentHintText.current &&
-      containerRef.current.contains(document.activeElement) &&
+      containerRef.current?.contains(document.activeElement) &&
       document.activeElement.tagName === 'INPUT'
     ) {
       sendAssertive(contentHintText)