@seamly/web-ui 18.3.0-beta.1 → 19.0.0-beta.2

package/src/javascripts/lib/redux-helpers/index.js

@@ -42,14 +42,6 @@ export function createThunk(type, thunkCreator) {
   return fn
 }
 
-export function createDomain(domain) {
-  return {
-    createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),
-    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),
-    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER),
-  }
-}
-
 export function createReducer(domain, handlers = {}, defaultState) {
   const reducer = (state, action) => {
     if (state === undefined) {
@@ -62,3 +54,14 @@ export function createReducer(domain, handlers = {}, defaultState) {
   reducer.toString = () => domain
   return reducer
 }
+
+export function createDomain(domain) {
+  return {
+    createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),
+    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),
+    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER),
+    createReducer: (handlers, defaultState) =>
+      createReducer(domain, handlers, defaultState),
+    selectState: (state) => state[domain],
+  }
+}

package/src/javascripts/style-guide/components/app.js

@@ -4,7 +4,12 @@ import StyleGuideView from './view'
 import StyleGuideLinks from './links'
 import { getStateObj } from '../states'
 
-const StyleGuideApp = ({ config, styleGuideConfig, headingLevel = 2 }) => {
+const StyleGuideApp = ({
+  config,
+  styleGuideConfig,
+  translations,
+  headingLevel = 2,
+}) => {
   const [staticState, setStaticState] = useState(null)
   const [selectedStateDescription, setSelectedStateDescription] = useState('')
   const [showStyleGuide, setShowStyleGuide] = useState(true)
@@ -138,7 +143,7 @@ const StyleGuideApp = ({ config, styleGuideConfig, headingLevel = 2 }) => {
           {showStyleGuide && (
             <StyleGuideView
               customComponents={styleGuideConfig.customComponents}
-              translations={config.translations}
+              translations={translations}
               state={staticState}
             />
           )}

package/src/javascripts/style-guide/components/static-core.js

@@ -9,8 +9,12 @@ import {
 import stateReducer from '../../domains/store/state-reducer'
 import { Reducer as formReducer } from '../../domains/forms'
 import { Reducer as translationsReducer } from '../../domains/translations'
-import { Reducer as i18nReducer } from '../../domains/i18n'
+import {
+  Reducer as i18nReducer,
+  Actions as I18nActions,
+} from '../../domains/i18n'
 import { Reducer as interruptReducer } from '../../domains/interrupt'
+import { Reducer as appReducer } from '../../domains/app'
 import {
   Reducer as configReducer,
   Actions as ConfigActions,
@@ -24,7 +28,7 @@ const bareApi = {
   store: { get: () => {}, set: () => {} },
 }
 
-const SeamlyTestCore = ({ state, children }) => {
+const SeamlyTestCore = ({ state, translations, children }) => {
   const liveMsgRef = useRef(() => {})
   const eventBusRef = useRef({ emit: () => {} })
 
@@ -38,6 +42,7 @@ const SeamlyTestCore = ({ state, children }) => {
     const newStore = createReduxStore({
       reducers: {
         state: stateReducer,
+        [String(appReducer)]: appReducer,
         [String(configReducer)]: configReducer,
         [String(formReducer)]: formReducer,
         [String(translationsReducer)]: translationsReducer,
@@ -51,8 +56,9 @@ const SeamlyTestCore = ({ state, children }) => {
       },
     })
     newStore.dispatch(ConfigActions.initialize(configSlice || {}))
+    newStore.dispatch(I18nActions.setLocaleResolve('en-GB', translations))
     return newStore
-  }, [state])
+  }, [state, translations])
 
   return (
     state && (

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

@@ -479,7 +479,7 @@ const imageMessage = {
       description: 'Plaatje',
       isZoomable: false,
       type: 'image',
-      url: 'https://via.placeholder.com/150',
+      url: 'https://developers.seamly.ai/clients/web-ui/static/photos/image-square-small.jpg',
     },
     fromClient: false,
     fromHistory: true,
@@ -504,7 +504,7 @@ const imageMessageWithLightbox = {
       description: 'Plaatje',
       isZoomable: true,
       type: 'image',
-      url: 'https://via.placeholder.com/150',
+      url: 'https://developers.seamly.ai/clients/web-ui/static/photos/image-portrait.jpg',
     },
     fromClient: false,
     fromHistory: true,
@@ -654,7 +654,7 @@ const fileDownloadPayload = {
     contentType: 'image/jpg',
     filename: 'placeholder.jpg',
     filesize: 991078,
-    url: 'https://via.placeholder.com/150',
+    url: 'https://developers.seamly.ai/clients/web-ui/static/photos/image-square-small.jpg',
   },
 }
 
@@ -796,7 +796,7 @@ const cardAskText = {
       description:
         'Pizza Margherita is a **typical Neapolitan pizza**.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
       image:
-        'https://via.placeholder.com/400x200/dee3e5/6a7f8c?text=Margherita',
+        'https://developers.seamly.ai/clients/web-ui/static/photos/card-square.jpg',
       title: 'Pizza Margherita',
     },
   },
@@ -815,7 +815,7 @@ const cardNavigate = {
       buttonText: 'Order now!',
       description: 'Pizza Margherita is a **typical Neapolitan pizza**.',
       image:
-        'https://via.placeholder.com/400x200/dee3e5/6a7f8c?text=Margherita',
+        'https://developers.seamly.ai/clients/web-ui/static/photos/card-landscape.jpg',
       title: 'Pizza Margherita',
     },
   },
@@ -832,7 +832,7 @@ const cardTopic = {
       },
       buttonText: 'Set topic! (title & description optional)',
       image:
-        'https://via.placeholder.com/400x200/dee3e5/6a7f8c?text=Margherita',
+        'https://developers.seamly.ai/clients/web-ui/static/photos/card-portrait.jpg',
     },
   },
 }
@@ -1182,9 +1182,9 @@ const standardState = {
       showDisclaimer: true,
     },
   },
-  cobrowserBar: {
+  chatStatusBar: {
     category: categoryKeys.features,
-    headingText: `Cobrowse bar`,
+    headingText: `Chat status bar`,
     description: '',
     ...baseState,
     options: {

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

@@ -1,6 +1,5 @@
 import { render } from 'preact'
-import { Engine } from '@seamly/web-ui'
-import en from '@seamly/web-ui/translations/en'
+import { API, Engine } from '@seamly/web-ui'
 import StyleGuideApp from './components/app'
 
 class SeamlyStyleGuideInstance extends Engine {
@@ -9,31 +8,35 @@ class SeamlyStyleGuideInstance extends Engine {
     this.styleGuideConfig = styleGuideConfig || {}
   }
 
-  render() {
+  async render() {
     const restComponents = {
       ...(this.config.customComponents || {}),
       view: undefined,
     }
 
+    const api = new API({
+      namespace: this.config.namespace,
+      config: this.config.api,
+    })
+    api.URLS = {
+      translations: `/client/${this.config.api.key}/translations/{version}/{locale}.json`,
+    }
+    const translations = await api.getTranslations(
+      this.config.context.locale || 'en-GB',
+    )
+
     const renderConfig = {
       ...this.config,
       customComponents: Object.keys(restComponents).length
         ? restComponents
         : undefined,
-      translations: this.config.translations || {
-        ...en,
-        disclaimer: {
-          ...en.disclaimer,
-          content:
-            'This chat session will be saved to help us improve our service delivery. <a href="https://seamly.ai/">More information</a>',
-        },
-      },
     }
 
     render(
       <StyleGuideApp
         config={renderConfig}
         styleGuideConfig={this.styleGuideConfig}
+        translations={translations}
       />,
       this.parentElement,
     )

package/src/javascripts/ui/components/conversation/event/divider/variants/new-translation.js

@@ -25,7 +25,7 @@ const NewTranslationDivider = ({ event }) => {
           translationEnabled
             ? 'translations.divider.startText'
             : 'translations.divider.stopText',
-          languageName,
+          { language: languageName },
         )}
       </p>
       {translationEnabled ? (

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

@@ -23,8 +23,8 @@ const Upload = ({ event, ...props }) => {
   const srText = useMemo(
     () =>
       url
-        ? t('fileUpload.srFileDownloadText', filename)
-        : t('fileUpload.srFileUploadedText', filename),
+        ? t('fileUpload.srFileDownloadText', { fileName: filename })
+        : t('fileUpload.srFileUploadedText', { fileName: filename }),
     [url, filename, t],
   )
 

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

@@ -5,6 +5,7 @@ import {
   useSeamlyIdleDetachCountdown,
 } from '../../hooks/seamly-hooks'
 import { activitySendDelay } from '../../../config'
+import { className } from '../../../lib/css'
 
 const SeamlyActivityMonitor = ({ children }) => {
   const prevSendTimestamp = useRef(0)
@@ -35,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-event-subscriber.js

@@ -13,6 +13,7 @@ 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,
@@ -92,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
               }

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

@@ -59,13 +59,7 @@ const SeamlyInstanceFunctionsLoader = () => {
     },
     [api?.send],
   )
-  useSeamlyInstanceFunction(
-    'setLocale',
-    (locale) => {
-      sendContext({ locale })
-    },
-    [api?.send],
-  )
+
   useSeamlyInstanceFunction(
     'setVariables',
     (variables) => {

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)
 

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])

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

@@ -33,18 +33,25 @@ export default function TextEntryForm({ controlName, skipLinkId }) {
 
   const handleFocus = useCallback(() => {
     if (reachedCharacterWarning) {
-      sendAssertive(t('input.srCharacterLimitText', remainingChars))
+      sendAssertive(t('input.srCharacterLimitText', { limit: remainingChars }))
     }
 
     emitEvent('ui.inputFocus')
   }, [t, sendAssertive, reachedCharacterWarning, remainingChars, emitEvent])
   const placeholder = useMemo(
     () =>
-      t('input.inputPlaceholder', hasCharacterLimit ? characterLimit : null),
+      t('input.inputPlaceholder', {
+        hasLimit: hasCharacterLimit,
+        limit: hasCharacterLimit ? characterLimit : null,
+      }),
     [t, hasCharacterLimit, characterLimit],
   )
   const labelText = useMemo(
-    () => t('input.inputLabel', hasCharacterLimit ? characterLimit : null),
+    () =>
+      t('input.inputLabel', {
+        hasLimit: hasCharacterLimit,
+        limit: hasCharacterLimit ? characterLimit : null,
+      }),
     [t, hasCharacterLimit, characterLimit],
   )
   // When the input holds a value, the component should be blocked from switching

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

@@ -15,8 +15,8 @@ export default function FileInputForm({
 }) {
   const { t } = useI18n()
   const [{ value: fileList }] = useFormControl(controlName)
-  const selectedFileName =
-    fileList && fileList.length > 0 ? fileList[0].name : ''
+  const hasFile = fileList && fileList.length > 0
+  const selectedFileName = hasFile ? fileList[0].name : ''
 
   return (
     <Form className={className('input', 'input--file')}>
@@ -25,7 +25,10 @@ export default function FileInputForm({
         id={skiplinkId}
         accept={accept}
         labelText={t('fileUpload.labelText')}
-        outputText={t('fileUpload.selectedText', selectedFileName)}
+        outputText={t('fileUpload.selectedText', {
+          hasFile,
+          filename: selectedFileName,
+        })}
         contentHint={contentHint}
       />
       <div className={className('upload__button-container')}>

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

@@ -40,12 +40,14 @@ const Upload = () => {
 
   const hasError = false
 
-  const { selectedFileName, uploadHandle, hasServerError, progress } =
+  const { hasFile, selectedFileName, uploadHandle, hasServerError, progress } =
     useSingleFileUpload(formName, fileInputName)
   const notificationId = useGeneratedId()
   const prevIsComplete = useRef(true)
 
-  const contentHintText = t('fileUpload.contentHint', formatBytes(maxSize))
+  const contentHintText = t('fileUpload.contentHint', {
+    size: formatBytes(maxSize),
+  })
   const prevContentHintText = useRef('')
   const containerRef = useRef(null)
 
@@ -177,7 +179,10 @@ const Upload = () => {
             contentHint={contentHintText}
             isComplete={isComplete}
             isUploading={isUploading}
-            outputText={t('fileUpload.selectedText', selectedFileName)}
+            outputText={t('fileUpload.selectedText', {
+              hasFile,
+              filename: selectedFileName,
+            })}
             onClickCancel={handleOnClickCancel}
           />
         )}

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

@@ -10,7 +10,6 @@ import {
 } from '../../hooks/seamly-state-hooks'
 import { useGeneratedId } from '../../hooks/utility-hooks'
 import { useSkiplinkTargetFocusing } from '../../hooks/focus-helper-hooks'
-import { useSeamlyHasUserResponded } from '../../hooks/seamly-api-hooks'
 import { useLiveRegion } from '../../hooks/live-region-hooks'
 import useSeamlyIdleDetachCountdown from '../../hooks/use-seamly-idle-detach-countdown'
 import useSeamlyResumeConversationPrompt from '../../hooks/use-seamly-resume-conversation-prompt'
@@ -20,6 +19,7 @@ import InOutTransition, {
 } from '../widgets/in-out-transition'
 import { useTranslatedEventData } from '../../../domains/translations'
 import { useInterrupt } from '../../../domains/interrupt'
+import { useUserHasResponded } from '../../../domains/app'
 
 const Faq = () => {
   const { t } = useI18n()
@@ -55,7 +55,7 @@ const Faq = () => {
   const prevHasFaqs = useRef(false)
 
   const { isInline } = useSeamlyLayoutMode()
-  const hasResponded = useSeamlyHasUserResponded()
+  const hasResponded = useUserHasResponded()
   const hideForWindow = !isInline && hasResponded
   const prevHideForWindow = useRef(hideForWindow)
 

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

@@ -1,25 +1,25 @@
-import { useState, useEffect, useCallback } from 'preact/hooks'
+import { useCallback, useMemo } from 'preact/hooks'
 import { className } from '../../../lib/css'
 import {
   useSeamlyAppContainerClassNames,
   useSeamlyVisibility,
   useSeamlyLayoutMode,
-  useSeamlyHasUserResponded,
   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'
 
 const AppFrame = ({ children }) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
   const { isOpen, isVisible, setVisibility } = useSeamlyVisibility()
-  const { context, zIndex, showFaq } = useConfig()
+  const { zIndex, showFaq } = useConfig()
   const { isModal, isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
-  const userResponded = useSeamlyHasUserResponded()
-  const [blockLang, setBlockLang] = useState(undefined)
-  const { locale } = context || {}
+  const userResponded = useUserHasResponded()
+  const { locale } = useI18n()
 
   const containerElementRef = useCallback(
     (container) => {
@@ -28,13 +28,16 @@ const AppFrame = ({ children }) => {
     [setSeamlyContainerElement],
   )
 
-  useEffect(() => {
+  const blockLang = useMemo(() => {
     if (locale) {
       const htmlElementLang = document
         .querySelector('html')
         .getAttribute('lang')
-      if (!htmlElementLang || htmlElementLang !== locale) setBlockLang(locale)
+      if (htmlElementLang !== locale) {
+        return locale
+      }
     }
+    return undefined
   }, [locale])
 
   const classNames = ['app', ...appContainerClassNames]

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

@@ -25,14 +25,18 @@ const Interrupt = ({
   useEffect(() => {
     if (isExpiredError) {
       seamlyCommands[action]()
-    } else if (srText) {
+    }
+  }, [action, seamlyCommands, isExpiredError])
+
+  useEffect(() => {
+    if (!isExpiredError && srText) {
       // Wait for live regions to stabilise in case this occurs
       // at an initial render
       setTimeout(() => {
         sendPolite(srText)
       }, 200)
     }
-  }, [sendPolite, seamlyCommands, srText, isExpiredError, action])
+  }, [sendPolite, srText, isExpiredError])
 
   const onClickHandler = () => {
     seamlyCommands[action]()

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/upload-progress.js

@@ -25,7 +25,7 @@ const UploadProgress = () => {
             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/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

@@ -4,7 +4,7 @@ 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 { useConfig } from '../../domains/config'
+import { typingTimeout } from '../../config'
 
 const {
   SET_BLOCK_AUTO_ENTRY_SWITCH,
@@ -14,19 +14,18 @@ const {
 
 export const useSeamlyTyping = () => {
   const { sendAction } = useSeamlyCommands()
-  const { typing: typingConfig } = useConfig()
   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)
     }
   }, [])
 
@@ -48,33 +47,30 @@ export const useSeamlyTyping = () => {
     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)
   }
 }
 

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

@@ -24,7 +24,6 @@ export {
 export {
   useSeamlyApiContext,
   useSeamlyConversationUrl,
-  useSeamlyHasUserResponded,
 } from './seamly-api-hooks'
 export { default as useSeamlyDispatchContext } from './use-seamly-dispatch'
 export {