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

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

@@ -1,7 +1,7 @@
+import { useMemo } from 'preact/hooks'
 import { className } from '../../../../lib/css'
 import Icon from '../../layout/icon'
 import { useI18n } from '../../../../domains/i18n'
-import { microsecondsToMilliseconds } from '../../../utils/general-utils'
 import MessageContainer from '../message-container'
 import { useTranslatedEventData } from '../../../../domains/translations'
 
@@ -18,40 +18,25 @@ const Upload = ({ event, ...props }) => {
   const { t } = useI18n()
   const [body] = useTranslatedEventData(event)
   const { fromClient } = event.payload
-  const { deleteAt, filename, url } = body
-  const deleted =
-    url && !!deleteAt && microsecondsToMilliseconds(deleteAt) < Date.now()
+  const { filename, url } = body
 
-  const getSrText = () => {
-    if (url) {
-      if (deleted) {
-        return t('fileUpload.srFileUnavailableText', filename)
-      } else {
-        return t('fileUpload.srFileDownloadText', filename)
-      }
-    } else {
-      return t('fileUpload.srFileUploadedText', filename)
-    }
-  }
+  const srText = useMemo(
+    () =>
+      url
+        ? t('fileUpload.srFileDownloadText', { fileName: filename })
+        : t('fileUpload.srFileUploadedText', { fileName: filename }),
+    [url, filename, t],
+  )
 
   return (
-    <MessageContainer
-      event={event}
-      type="upload"
-      modifiers={deleted && 'deleted'}
-      info={deleted ? t('fileUpload.fileUnavailableText') : undefined}
-      {...props}
-    >
+    <MessageContainer event={event} type="upload" {...props}>
       <div className={className('download')}>
         <Icon name="download" size="16" />
-        <UploadContent
-          url={!deleted && url}
-          target={!fromClient ? '_blank' : undefined}
-        >
+        <UploadContent url={url} target={!fromClient ? '_blank' : undefined}>
           <span aria-hidden="true" className={className('file-download')}>
             {filename}
           </span>
-          <span className={className('visually-hidden')}>{getSrText()}</span>
+          <span className={className('visually-hidden')}>{srText}</span>
         </UploadContent>
       </div>
     </MessageContainer>

package/src/javascripts/ui/components/conversation/message-container.js

@@ -18,10 +18,8 @@ function MessageContainer({
   const classNames = useSeamlyMessageContainerClassNames(event)
   const { t } = useI18n()
 
-  const [
-    ,
-    { hasTranslation, isTranslated, toggleTranslation, locale },
-  ] = useTranslatedEventData(event)
+  const [, { hasTranslation, isTranslated, toggleTranslation, locale }] =
+    useTranslatedEventData(event)
 
   if (type) {
     classNames.push('message--type-' + type)
@@ -29,9 +27,9 @@ function MessageContainer({
   if (modifiers) {
     if (typeof modifiers === 'string') {
       // eslint-disable-next-line no-param-reassign
-      modifiers = modifiers.split(' ').filter(v => v.length)
+      modifiers = modifiers.split(' ').filter((v) => v.length)
     }
-    modifiers.forEach(modifier => {
+    modifiers.forEach((modifier) => {
       classNames.push('message--' + modifier)
     })
   }

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

@@ -5,15 +5,13 @@ import {
   useSeamlyIdleDetachCountdown,
 } from '../../hooks/seamly-hooks'
 import { activitySendDelay } from '../../../config'
+import { className } from '../../../lib/css'
 
 const SeamlyActivityMonitor = ({ children }) => {
   const prevSendTimestamp = useRef(0)
   const { sendAction } = useSeamlyCommands()
-  const {
-    hasCountdown,
-    isActive,
-    stopCountdown,
-  } = useSeamlyIdleDetachCountdown()
+  const { hasCountdown, isActive, stopCountdown } =
+    useSeamlyIdleDetachCountdown()
 
   const onActivityHandler = useCallback(() => {
     const timeStamp = new Date().getTime()
@@ -38,6 +36,7 @@ const SeamlyActivityMonitor = ({ children }) => {
   // be fired inside the container on the initial focus event.
   return (
     <div
+      className={className('activity-monitor')}
       tabIndex="-1"
       onMouseDown={onActivityHandler}
       onKeyUp={onActivityHandler}

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

@@ -1,4 +1,3 @@
-import SeamlyApi from './seamly-api'
 import SeamlyInstanceFunctionsLoader from './seamly-instance-functions-loader'
 import SeamlyReadState from './seamly-read-state'
 import SeamlyNewNotifications from './seamly-new-notifications'
@@ -8,14 +7,14 @@ import SeamlyActivityMonitor from './seamly-activity-monitor'
 import SeamlyInitializer from './seamly-initializer'
 import SeamlyEventSubscriber from './seamly-event-subscriber'
 import SeamlyFileUpload from './seamly-file-upload'
-import { SeamlyEventBusContext } from './seamly-api-context'
-import StoreProvider from '../../store'
+import { SeamlyEventBusContext, SeamlyApiContext } from './seamly-api-context'
+import { StoreProvider } from '../../../domains/redux'
 
-const SeamlyCore = ({ children, config, eventBus }) => {
+const SeamlyCore = ({ store, children, config, eventBus, api }) => {
   return (
-    <StoreProvider translations={config.translations}>
+    <StoreProvider store={store}>
       <SeamlyEventBusContext.Provider value={eventBus}>
-        <SeamlyApi>
+        <SeamlyApiContext.Provider value={api}>
           <SeamlyLiveRegion>
             <SeamlyInitializer config={config} />
             <SeamlyEventSubscriber eventBus={eventBus} />
@@ -27,7 +26,7 @@ const SeamlyCore = ({ children, config, eventBus }) => {
               <SeamlyFileUpload>{children}</SeamlyFileUpload>
             </SeamlyActivityMonitor>
           </SeamlyLiveRegion>
-        </SeamlyApi>
+        </SeamlyApiContext.Provider>
       </SeamlyEventBusContext.Provider>
     </StoreProvider>
   )

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

@@ -2,7 +2,6 @@ import { useEffect, useRef } from 'preact/hooks'
 import { seamlyActions, featureKeys } from '../../utils/seamly-utils'
 import { useI18n } from '../../../domains/i18n'
 import {
-  useSeamlyInterrupt,
   useSeamlyOptions,
   useEvents,
   useSeamlyApiContext,
@@ -13,6 +12,8 @@ import {
 import SeamlyGeneralError from '../../../api/errors/seamly-general-error'
 import SeamlySessionExpiredError from '../../../api/errors/seamly-session-expired-error'
 import SeamlyOfflineError from '../../../api/errors/seamly-offline-error'
+import { Actions as InterruptActions } from '../../../domains/interrupt'
+import { Actions as AppActions } from '../../../domains/app'
 
 const {
   ADD_EVENT,
@@ -20,7 +21,6 @@ const {
   SET_IS_LOADING,
   SET_PARTICIPANT,
   SET_HEADER_SUB_TITLE,
-  CLEAR_INTERRUPT,
   SET_ACTIVE_SERVICE,
   INIT_RESUME_CONVERSATION_PROMPT,
   CLEAR_EVENTS,
@@ -38,14 +38,13 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
   const dispatch = useSeamlyDispatchContext()
   const events = useEvents()
   const prevEmittedEventId = useRef(null)
-  const { setInterrupt } = useSeamlyInterrupt()
   const { setUserSelectedOption } = useSeamlyOptions()
   const { initCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
   const { emitEvent } = useSeamlyCommands()
 
   useEffect(() => {
     if (api.connectionInfo) {
-      const updateParticipant = event => {
+      const updateParticipant = (event) => {
         const { payload } = event
 
         if (!payload || !payload.participant) {
@@ -73,7 +72,7 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
       }
 
       api.stream().subscribe({
-        next: event => {
+        next: (event) => {
           const { type, payload } = event
           switch (type) {
             case 'ui':
@@ -94,6 +93,7 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
                   dispatch({ type: INIT_RESUME_CONVERSATION_PROMPT })
                   break
                 case 'user_first_response':
+                  dispatch(AppActions.setHasResponded(true))
                   eventBus.emit('system.userFirstResponse', payload.body)
                   break
               }
@@ -178,19 +178,21 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
             case 'error':
               switch (payload.type) {
                 case 'find_conversation_erred':
-                  setInterrupt(new SeamlySessionExpiredError())
+                  dispatch(
+                    InterruptActions.set(new SeamlySessionExpiredError()),
+                  )
                   break
                 case 'seamly_offline':
-                  setInterrupt(new SeamlyOfflineError())
+                  dispatch(InterruptActions.set(new SeamlyOfflineError()))
                   dispatch({ type: CLEAR_EVENTS })
                   break
                 default:
-                  setInterrupt(new SeamlyGeneralError())
+                  dispatch(InterruptActions.set(new SeamlyGeneralError()))
                   break
               }
               break
             case 'socket_opened':
-              dispatch({ type: CLEAR_INTERRUPT })
+              dispatch(InterruptActions.clear())
               break
           }
         },
@@ -199,7 +201,7 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
       api
         .stream()
         .filter(
-          e =>
+          (e) =>
             e.type === 'message' &&
             EMITTABLE_MESSAGE_TYPES.includes(e.payload.type),
         )
@@ -220,7 +222,6 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
     api,
     eventBus,
     t,
-    setInterrupt,
     setUserSelectedOption,
     initCountdown,
     endCountdown,
@@ -231,9 +232,9 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
     const subscribe = () => {
       return api
         .stream()
-        .filter(e => e.type === 'sync')
+        .filter((e) => e.type === 'sync')
         .subscribe({
-          next: event => {
+          next: (event) => {
             const { payload } = event
 
             const lastEvent = events[events.length - 1]
@@ -245,7 +246,7 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
 
             api
               .getConversation()
-              .then(history => {
+              .then((history) => {
                 if (!history) {
                   return
                 }
@@ -255,8 +256,8 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
                   history,
                 })
               })
-              .catch(error => {
-                setInterrupt(error)
+              .catch((error) => {
+                dispatch(InterruptActions.set(error))
               })
           },
         })
@@ -270,7 +271,7 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
     }
 
     return () => {}
-  }, [api, events, dispatch, setInterrupt])
+  }, [api, events, dispatch])
 
   return null
 }

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

@@ -21,20 +21,20 @@ const SeamlyFileUpload = ({ children }) => {
   const api = useSeamlyApiContext()
   const { addUploadBubble } = useSeamlyCommands()
 
-  const onUploadFileHandler = file => {
+  const onUploadFileHandler = (file) => {
     const fileId = randomId()
 
     const uploadHandle = api.uploadFile(
       file,
-      p => {
+      (p) => {
         dispatch({ type: SET_UPLOAD_PROGRESS, fileId, progress: Math.ceil(p) })
       },
-      result => {
+      (result) => {
         const {
           id,
           transactionId,
           occurredAt,
-          body: { contentType, deleteAt, filename, filesize, url },
+          body: { contentType, filename, filesize, url },
         } = result.body
         dispatch({ type: SET_UPLOAD_COMPLETE, fileId })
         addUploadBubble(
@@ -42,13 +42,12 @@ const SeamlyFileUpload = ({ children }) => {
           transactionId,
           occurredAt,
           contentType,
-          deleteAt,
           filename,
           filesize,
           url,
         )
       },
-      err => {
+      (err) => {
         const errorKey = err && err.body ? err.body.error : ''
         let errorText
 

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

@@ -2,12 +2,8 @@ import useSeamlyIdleDetachCountdown from '../../hooks/use-seamly-idle-detach-cou
 import useInterval from '../../hooks/use-interval'
 
 const SeamlyIdleDetachCounter = () => {
-  const {
-    hasCountdown,
-    isActive,
-    remaining,
-    decrementCountdown,
-  } = useSeamlyIdleDetachCountdown()
+  const { hasCountdown, isActive, remaining, decrementCountdown } =
+    useSeamlyIdleDetachCountdown()
 
   useInterval(
     () => {

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

@@ -1,75 +1,22 @@
 import { useEffect, useRef } from 'preact/hooks'
-import {
-  getSeamlyConfig,
-  seamlyActions,
-  visibilityStates,
-} from '../../utils/seamly-utils'
-import { useI18n } from '../../../domains/i18n'
-import {
-  useSeamlyInterrupt,
-  useSeamlyOptions,
-  useSeamlyVisibility,
-  useSeamlyApiContext,
-  useSeamlyDispatchContext,
-} from '../../hooks/seamly-hooks'
+import { visibilityStates } from '../../utils/seamly-utils'
+import { useSeamlyOptions, useSeamlyVisibility } from '../../hooks/seamly-hooks'
+import { useConfig } from '../../../domains/config'
 
-const {
-  UPDATE_CONFIG,
-  SET_INITIAL_STATE,
-  SET_SHOW_DISCLAIMER,
-  SET_HEADER_SUB_TITLE,
-  SET_FEATURES,
-} = seamlyActions
-
-const SeamlyInitializer = ({ config }) => {
-  const { t } = useI18n()
-  const dispatch = useSeamlyDispatchContext()
-  const api = useSeamlyApiContext()
+const SeamlyInitializer = () => {
   const { initUserSelectedOptions } = useSeamlyOptions()
-  const { setInterrupt } = useSeamlyInterrupt()
   const seamlyInitialized = useRef(false)
   const { setVisibility } = useSeamlyVisibility()
+  const config = useConfig()
 
   useEffect(() => {
-    const seamlyConfig = getSeamlyConfig(config)
-    const { showDisclaimer } = config
-    const { agentName } = config.defaults || {}
-
-    dispatch({ type: UPDATE_CONFIG, config: seamlyConfig })
-
-    dispatch({ type: SET_SHOW_DISCLAIMER, showDisclaimer })
-
-    if (agentName) {
-      dispatch({
-        type: SET_HEADER_SUB_TITLE,
-        title: agentName,
-      })
-    }
-  }, [dispatch, config])
-
-  useEffect(() => {
-    const initSeamly = async () => {
+    if (config.api && !seamlyInitialized.current) {
       seamlyInitialized.current = true
       initUserSelectedOptions()
 
       setVisibility(visibilityStates.initialize)
-
-      try {
-        const { accountConfig = {}, initialState = {} } = await api.getConfig()
-        const { features } = accountConfig || {}
-
-        dispatch({ type: SET_FEATURES, features })
-
-        dispatch({ type: SET_INITIAL_STATE, initialState })
-      } catch (error) {
-        setInterrupt(error)
-      }
-    }
-
-    if (api.connectionInfo && !seamlyInitialized.current) {
-      initSeamly()
     }
-  }, [api, dispatch, t, setInterrupt, initUserSelectedOptions, setVisibility])
+  }, [initUserSelectedOptions, config, setVisibility])
 
   return null
 }

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

@@ -1,11 +1,9 @@
 import { useContext, useEffect, useRef } from 'preact/hooks'
 import {
-  useSeamlyConfig,
   useSeamlyCommands,
   useSeamlyVisibility,
   useSeamlyUnreadCount,
   useSeamlyLayoutMode,
-  useSeamlyInterrupt,
   useSeamlyConversationUrl,
   useSeamlyActivityEventHandler,
   useSeamlyApiContext,
@@ -13,6 +11,8 @@ import {
 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'
 
 function useSeamlyInstanceFunction(functionName, fn, deps = []) {
   const eventBus = useContext(SeamlyEventBusContext)
@@ -32,7 +32,7 @@ function useSeamlyInstanceFunction(functionName, fn, deps = []) {
 }
 
 const SeamlyInstanceFunctionsLoader = () => {
-  const config = useSeamlyConfig()
+  const config = useConfig()
   const { sendMessage, sendContext, sendAction } = useSeamlyCommands()
   const { setVisibility, visible } = useSeamlyVisibility()
   const currentVisibility = useRef(visible)
@@ -42,7 +42,7 @@ const SeamlyInstanceFunctionsLoader = () => {
   const previousUnreadCount = useRef(null)
   const previousVisibilityState = useRef(null)
   const { isInline, isResolving } = useSeamlyLayoutMode()
-  const { hasInterrupt } = useSeamlyInterrupt()
+  const { hasInterrupt } = useInterrupt()
   const currentConversationUrl = useSeamlyConversationUrl()
   const prevConversationUrl = useRef(null)
   const onActivityHandler = useSeamlyActivityEventHandler()
@@ -54,26 +54,20 @@ const SeamlyInstanceFunctionsLoader = () => {
 
   useSeamlyInstanceFunction(
     'askText',
-    text => {
+    (text) => {
       sendMessage({ body: text })
     },
     [api?.send],
   )
-  useSeamlyInstanceFunction(
-    'setLocale',
-    locale => {
-      sendContext({ locale })
-    },
-    [api?.send],
-  )
+
   useSeamlyInstanceFunction(
     'setVariables',
-    variables => {
+    (variables) => {
       sendContext({ variables })
     },
     [api?.send],
   )
-  useSeamlyInstanceFunction('getVisibility', callback => {
+  useSeamlyInstanceFunction('getVisibility', (callback) => {
     if (callback) {
       callback(currentVisibility.current)
     } else {
@@ -84,7 +78,7 @@ const SeamlyInstanceFunctionsLoader = () => {
   })
   useSeamlyInstanceFunction(
     'setVisibility',
-    visibilityState => {
+    (visibilityState) => {
       if (!Object.values(visibilityStates).includes(visibilityState)) {
         console.error(
           'Requested visibility states should be "open", "minimized" ,"hidden" or null.',
@@ -102,7 +96,7 @@ const SeamlyInstanceFunctionsLoader = () => {
         setVisibility(visibilityState)
       }
     },
-    [api?.send],
+    [config?.api],
   )
   useSeamlyInstanceFunction(
     'sendCustomAction',

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

@@ -16,7 +16,7 @@ const SeamlyLiveRegion = ({ children }) => {
   const isMounted = useRef(true)
 
   const messageSetter = useCallback(
-    state => {
+    (state) => {
       if (isMounted.current) {
         setMessage(state)
         eventBus.emit('aria-live', state)

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback } from 'preact/hooks'
+import { useEffect, useRef, useMemo } from 'preact/hooks'
 import { useI18n } from '../../../domains/i18n'
 import {
   useEvents,
@@ -20,8 +20,8 @@ const SeamlyNewNotifications = () => {
   const prevIsOpen = useRef(null)
   const debounceFunc = useRef(null)
 
-  const notifyUnread = useCallback(
-    debounce(eventArray => {
+  const notifyUnread = useMemo(() => {
+    return debounce((eventArray) => {
       const serverEventCount = eventArray.filter(
         ({ payload }) => !payload.fromClient && !payload.fromHistory,
       ).length
@@ -33,9 +33,8 @@ const SeamlyNewNotifications = () => {
         )
         previousServerEventCount.current = serverEventCount
       }
-    }, newMessageScreenReaderWait),
-    [sendPolite],
-  )
+    }, newMessageScreenReaderWait)
+  }, [sendPolite, t])
 
   useEffect(() => {
     if (events.length > previousEventCount.current) {

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

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useRef } from 'preact/hooks'
+import { useEffect, useRef, useMemo } from 'preact/hooks'
 
 import {
   useEvents,
@@ -28,9 +28,11 @@ const SeamlyReadState = () => {
   const { sendAction } = useSeamlyCommands()
   const unreadCount = useSeamlyUnreadCount()
   const { sendPolite } = useLiveRegion()
-  const sendLive = useCallback(debounce(sendPolite, unreadScreenReaderWait), [
-    sendPolite,
-  ])
+  const sendLive = useMemo(
+    () => debounce(sendPolite, unreadScreenReaderWait),
+
+    [sendPolite],
+  )
   const prevIsVisible = useRef(null)
   const cancelSend = useRef(null)
 
@@ -40,13 +42,13 @@ const SeamlyReadState = () => {
     }
 
     const unread = events
-      .filter(event => {
+      .filter((event) => {
         return (
           isUnreadMessage(event) &&
           event.payload.messageStatus === readStates.received
         )
       })
-      .map(event => event.payload.id)
+      .map((event) => event.payload.id)
 
     if (unread.length > 0) {
       dispatch({ type: SET_EVENTS_READ, ids: unread })

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

@@ -5,7 +5,6 @@ import {
   useSeamlyResumeConversationPrompt,
   useSkiplinkTargetFocusing,
   useSeamlyEntry,
-  useSeamlyConfig,
   useFileUploadMeta,
 } from '../../hooks/seamly-hooks'
 import { entryTypes } from '../../utils/seamly-utils'
@@ -15,18 +14,16 @@ import ResumeConversationPrompt from '../warnings/resume-conversation-prompt'
 import TextEntry from './text-entry'
 import UploadToggle from './upload-toggle'
 import Upload from './upload'
+import { useConfig } from '../../../domains/config'
 
 const EntryContainer = () => {
   const entryContainer = useRef(null)
   const { hasCountdown } = useSeamlyIdleDetachCountdown()
   const [showCountdown, setShowCountDown] = useState(hasCountdown)
-  const {
-    hasPrompt: hasResumeConversationPrompt,
-  } = useSeamlyResumeConversationPrompt()
-  const [
-    showResumeConversationPrompt,
-    setShowResumeConversationPrompt,
-  ] = useState(hasResumeConversationPrompt)
+  const { hasPrompt: hasResumeConversationPrompt } =
+    useSeamlyResumeConversationPrompt()
+  const [showResumeConversationPrompt, setShowResumeConversationPrompt] =
+    useState(hasResumeConversationPrompt)
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
   const containedFocus = useRef(false)
   const { activeEntry } = useSeamlyEntry()
@@ -35,7 +32,7 @@ const EntryContainer = () => {
     upload: Upload,
   })
   const [renderEntry, setRenderEntry] = useState(() => activeEntry)
-  const config = useSeamlyConfig()
+  const config = useConfig()
   const { accountAllowsUploads } = useFileUploadMeta()
 
   const focusFn = useCallback(() => {
@@ -49,7 +46,7 @@ const EntryContainer = () => {
     const { entry } = customComponents || {}
 
     if (entry) {
-      setEntryComponents(c => ({
+      setEntryComponents((c) => ({
         ...c,
         ...entry,
       }))

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'preact/hooks'
+import { useEffect, useMemo } from 'preact/hooks'
 import { useI18n } from '../../../../domains/i18n'
 import { useLiveRegion } from '../../../hooks/live-region-hooks'
 import { useEntryTextLimit } from '../../../hooks/seamly-state-hooks'
@@ -14,14 +14,16 @@ export function useCharacterLimit(controlName) {
   const { sendAssertive } = useLiveRegion()
   const { hasLimit, limit } = useEntryTextLimit()
 
-  const debouncedSendAssertive = useCallback(
-    debounce(sendAssertive, maxCharacterSrDebounceDelay),
+  const debouncedSendAssertive = useMemo(
+    () => debounce(sendAssertive, maxCharacterSrDebounceDelay),
     [sendAssertive],
   )
   const validateLimit = useMemo(() => {
     return debounce((_reachedCharacterWarning, _remainingChars) => {
       if (_reachedCharacterWarning) {
-        debouncedSendAssertive(t('input.srCharacterLimitText', _remainingChars))
+        debouncedSendAssertive(
+          t('input.srCharacterLimitText', { limit: _remainingChars }),
+        )
       }
     }, maxCharacterSrDebounceDelay)
   }, [debouncedSendAssertive, t])