@seamly/web-ui 21.0.8 → 22.0.0-beta.1

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

@@ -0,0 +1,108 @@
+import { useEffect, useMemo } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
+import { maxCharacterSrDebounceDelay, maxCharacterWarningLimit } from 'config'
+import { useLiveRegion } from 'ui/hooks/live-region-hooks'
+import {
+  useEntryTextLimit,
+  useSeamlyStateContext,
+} from 'ui/hooks/seamly-state-hooks'
+import { debounce } from 'ui/utils/general-utils'
+import { ControlState } from 'domains/forms/forms.types'
+import { useFormControl } from 'domains/forms/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { clearAbortTransaction } from 'domains/store/slice'
+
+export function useCharacterLimit(controlName) {
+  const { t } = useI18n()
+  const { sendAssertive } = useLiveRegion()
+  const { hasLimit, limit } = useEntryTextLimit()
+
+  const debouncedSendAssertive = useMemo(
+    () => debounce(sendAssertive, maxCharacterSrDebounceDelay),
+    [sendAssertive],
+  )
+  const validateLimit = useMemo(() => {
+    return debounce((_reachedCharacterWarning, _remainingChars) => {
+      if (_reachedCharacterWarning) {
+        debouncedSendAssertive(
+          t('input.srCharacterLimitText', { limit: _remainingChars }),
+        )
+      }
+    }, maxCharacterSrDebounceDelay)
+  }, [debouncedSendAssertive, t])
+
+  const [{ value }] = useFormControl(controlName)
+  const remainingChars = hasLimit && value ? limit - value.length : limit
+  const reachedCharacterWarning = hasLimit
+    ? remainingChars <= maxCharacterWarningLimit
+    : false
+  const reachedCharacterLimit = hasLimit ? remainingChars < 0 : false
+
+  useEffect(() => {
+    validateLimit(reachedCharacterWarning, remainingChars)
+  }, [reachedCharacterWarning, remainingChars, validateLimit])
+
+  return {
+    hasCharacterLimit: hasLimit,
+    characterLimit: limit,
+    reachedCharacterWarning,
+    reachedCharacterLimit,
+    remainingChars,
+  }
+}
+
+export const useEntryTextTranslation = (controlName: ControlState['name']) => {
+  const { hasCharacterLimit, characterLimit } = useCharacterLimit(controlName)
+
+  const {
+    entryMeta: {
+      optionsOverride: { text },
+    },
+  } = useSeamlyStateContext()
+
+  const { t } = useI18n()
+
+  const placeholder: string = useMemo(
+    () =>
+      t('input.inputPlaceholder', {
+        hasLimit: hasCharacterLimit,
+        text: text?.placeholder || t('input.inputPlaceholderText'),
+        limit: hasCharacterLimit ? characterLimit : null,
+      }),
+    [t, hasCharacterLimit, characterLimit, text?.placeholder],
+  )
+
+  const label: string = useMemo(
+    () =>
+      t('input.inputLabel', {
+        hasLimit: !text?.label ? hasCharacterLimit : false,
+        text: text?.label || t('input.inputLabelText'),
+        limit: !text?.label && hasCharacterLimit ? characterLimit : null,
+      }),
+    [t, hasCharacterLimit, characterLimit, text?.label],
+  )
+
+  const labelClass: string = useMemo(
+    () => (text?.label ? 'input__label' : 'visually-hidden'),
+    [text?.label],
+  )
+
+  return { placeholder, label, labelClass }
+}
+
+export const useEntryAbortTransaction = () => {
+  const dispatch = useDispatch()
+
+  const {
+    entryMeta: { actions },
+  } = useSeamlyStateContext()
+
+  const clearEntryAbortTransaction = () => {
+    dispatch(clearAbortTransaction())
+  }
+
+  return {
+    abortTransaction: actions?.abortTransaction,
+    clearEntryAbortTransaction,
+  }
+}

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

@@ -9,7 +9,7 @@ import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
 import TextEntryForm from './text-entry-form'
 
-const controlName = 'textMessageEntry'
+export const textEntryControlName = 'textMessageEntry'
 
 export default function TextEntry({ ...props }) {
   const { isOpen, setVisibility } = useVisibility()
@@ -18,8 +18,8 @@ export default function TextEntry({ ...props }) {
   const { sendMessage } = useSeamlyCommands()
   const handleSubmit = useCallback(
     (values, { updateControlValue }) => {
-      sendMessage({ body: values[controlName] })
-      updateControlValue(controlName, '')
+      sendMessage({ body: values[textEntryControlName] })
+      updateControlValue(textEntryControlName, '')
       focusSkipLinkTarget()
 
       if (!isOpen) {
@@ -36,7 +36,10 @@ export default function TextEntry({ ...props }) {
       persistData={true}
       onSubmit={handleSubmit}
     >
-      <TextEntryForm controlName={controlName} skipLinkId={skipLinkId} />
+      <TextEntryForm
+        controlName={textEntryControlName}
+        skipLinkId={skipLinkId}
+      />
     </FormProvider>
   )
 }

package/src/javascripts/ui/components/entry/text-entry/{text-entry-form.js → text-entry-form.tsx}

@@ -1,4 +1,4 @@
-import { useCallback, useLayoutEffect, useMemo } from 'preact/hooks'
+import { useCallback, useLayoutEffect } 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'
@@ -7,7 +7,7 @@ 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'
+import { useCharacterLimit, useEntryTextTranslation } from './hooks'
 
 export default function TextEntryForm({ controlName, skipLinkId }) {
   const { t } = useI18n()
@@ -15,16 +15,17 @@ export default function TextEntryForm({ controlName, skipLinkId }) {
   const { emitEvent } = useSeamlyCommands()
   const handleKeyUp = useSeamlyTyping()
   const { setBlockAutoEntrySwitch } = useSeamlyEntry()
-
+  const { placeholder, label, labelClass } =
+    useEntryTextTranslation(controlName)
   // TODO: Standardize the validation on form fields
   const {
     hasCharacterLimit,
-    characterLimit,
     reachedCharacterWarning,
     reachedCharacterLimit,
     remainingChars,
   } = useCharacterLimit(controlName)
   const [{ value }] = useFormControl(controlName)
+
   const hasValue = !!value
 
   const handleFocus = useCallback(() => {
@@ -34,22 +35,7 @@ export default function TextEntryForm({ controlName, skipLinkId }) {
 
     emitEvent('ui.inputFocus')
   }, [t, sendAssertive, reachedCharacterWarning, remainingChars, emitEvent])
-  const placeholder = useMemo(
-    () =>
-      t('input.inputPlaceholder', {
-        hasLimit: hasCharacterLimit,
-        limit: hasCharacterLimit ? characterLimit : null,
-      }),
-    [t, hasCharacterLimit, characterLimit],
-  )
-  const labelText = useMemo(
-    () =>
-      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
   // to file upload form.
   useLayoutEffect(() => {
@@ -87,8 +73,8 @@ export default function TextEntryForm({ controlName, skipLinkId }) {
           className={className('input__text')}
           autocomplete="off"
           placeholder={placeholder}
-          labelText={labelText}
-          labelClass={className('visually-hidden')}
+          labelText={label}
+          labelClass={className(labelClass)}
           aria-invalid={hasCharacterLimit ? reachedCharacterLimit : null}
           onKeyUp={handleKeyUp}
           onFocus={handleFocus}

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

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
@@ -17,7 +18,7 @@ import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
 import { actionTypes } from 'ui/utils/seamly-utils'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useI18n } from 'domains/i18n/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import { className } from 'lib/css'
 
@@ -27,7 +28,7 @@ const Faq = () => {
   const sectionId = useGeneratedId()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
   const { sendPolite } = useLiveRegion()
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
   const { hasCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
   const { hasPrompt, continueChat } = useSeamlyResumeConversationPrompt()
 
@@ -36,7 +37,7 @@ const Faq = () => {
     payload: lastFaqEventPayload,
   })
   const faqs = useMemo(() => {
-    const newFaqs = lastFaqEventPayload && !hasInterrupt ? eventBody : []
+    const newFaqs = lastFaqEventPayload && !hasError ? eventBody : []
     const itemBaseClass = `faqs__item`
     return newFaqs.map(({ categories = [], ...faqRest }) => ({
       ...faqRest,
@@ -51,7 +52,7 @@ const Faq = () => {
         ),
       ],
     }))
-  }, [lastFaqEventPayload, hasInterrupt, eventBody])
+  }, [lastFaqEventPayload, hasError, eventBody])
 
   const prevFaqs = useRef(null)
   const prevHasFaqs = useRef(false)

package/src/javascripts/ui/components/form-controls/{input.js → input.tsx}

@@ -1,16 +1,27 @@
+import { HTMLAttributes } from 'preact/compat'
 import { useFormContext, useFormControl } from 'domains/forms/hooks'
 import FormControlWrapper from './wrapper'
 
+type InputProps = HTMLAttributes<HTMLInputElement> & {
+  id: string
+  name: string
+  type: string
+  labelText: string
+  labelClass: string
+  contentHint?: string
+  'aria-describedby'?: string
+}
+
 function Input({
   id,
   name,
   type,
   labelText,
   labelClass,
-  contentHint,
+  contentHint = null,
   'aria-describedby': ariaDescribedBy,
   ...props
-}) {
+}: InputProps) {
   const { isSubmitted } = useFormContext()
   const [field, { error }] = useFormControl(name)
   const hasError = isSubmitted && error

package/src/javascripts/ui/components/form-controls/{wrapper.js → wrapper.tsx}

@@ -12,9 +12,6 @@ const FormControlWrapper = ({
 }) => {
   return (
     <>
-      <label htmlFor={id} className={labelClass}>
-        {labelText}
-      </label>
       {contentHint && (
         <span
           id={`${id}-content-hint`}
@@ -23,8 +20,15 @@ const FormControlWrapper = ({
           {contentHint}
         </span>
       )}
+
       <Error id={`${id}-error`} error={!validity && errorText} />
-      {children}
+
+      <div className={className('form-control__wrapper')}>
+        <label htmlFor={id} className={labelClass}>
+          {labelText}
+        </label>
+        {children}
+      </div>
     </>
   )
 }

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

@@ -1,3 +1,4 @@
+import { useSelector } from 'react-redux'
 import {
   useSeamlyCurrentAgent,
   useSeamlyHeaderData,
@@ -5,7 +6,7 @@ import {
 } from 'ui/hooks/seamly-hooks'
 import { useStartChatIcon } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 import Icon from './icon'
@@ -16,10 +17,10 @@ const AgentInfo = () => {
   const unreadMessageCount = useSeamlyUnreadCount()
   const { isOpen } = useVisibility()
   const currentAgent = useSeamlyCurrentAgent()
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
   const startChatIcon = useStartChatIcon()
   const src = currentAgent?.avatar ?? startChatIcon
-  const displaySubtitle = hasInterrupt ? '' : subTitle
+  const displaySubtitle = hasError ? '' : subTitle
 
   const classNames = ['message-count']
 

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

@@ -1,21 +1,20 @@
+import { useSelector } from 'react-redux'
 import AppOptions from 'ui/components/app-options'
 import ChatScrollProvider from 'ui/components/conversation/event/chat-scroll/chat-scroll-provider'
 import EntryContainer from 'ui/components/entry/entry-container'
 import CollapseButton from 'ui/components/view/window-view/collapse-button'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import TranslationStatus from 'domains/translations/components/translation-status'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import Interrupt from './interrupt'
 
-function ChatFrame({ children, interruptComponent: InterruptComponent }) {
-  const { hasInterrupt, meta } = useInterrupt()
+function ChatFrame({ children }) {
+  const hasError = useSelector(selectHasError)
   const { isOpen } = useVisibility()
 
-  if (hasInterrupt) {
-    if (isOpen) {
-      return <InterruptComponent {...meta} />
-    }
-    return null
+  if (hasError) {
+    return <Interrupt />
   }
 
   return (

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

@@ -1,20 +1,19 @@
+import { useSelector } from 'react-redux'
 import AppOptions from 'ui/components/app-options'
 import ChatScrollProvider from 'ui/components/conversation/event/chat-scroll/chat-scroll-provider'
 import EntryContainer from 'ui/components/entry/entry-container'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import TranslationStatus from 'domains/translations/components/translation-status'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import Interrupt from './interrupt'
 
-function ChatFrame({ children, interruptComponent: InterruptComponent }) {
-  const { hasInterrupt, meta } = useInterrupt()
+function ChatFrame({ children }) {
   const { isOpen } = useVisibility()
+  const hasError = useSelector(selectHasError)
 
-  if (hasInterrupt) {
-    if (isOpen) {
-      return <InterruptComponent {...meta} />
-    }
-    return null
+  if (hasError) {
+    return <Interrupt />
   }
 
   return (

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

@@ -6,27 +6,18 @@ import {
   useSeamlyCommands,
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
 import { className } from 'lib/css'
 
-const Interrupt = ({
-  originalError,
-  title,
-  message,
-  buttonText,
-  action,
-  srText,
-}) => {
+const Interrupt = () => {
+  const {
+    meta: { originalError, title, message, buttonText, action, srText },
+  } = useInterrupt()
   const seamlyCommands = useSeamlyCommands()
   const headingId = useGeneratedId()
   const { sendPolite } = useLiveRegion()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
-  const isExpiredError = originalError.name === 'SeamlySessionExpiredError'
-
-  useEffect(() => {
-    if (isExpiredError && seamlyCommands[action]) {
-      seamlyCommands[action]()
-    }
-  }, [action, seamlyCommands, isExpiredError])
+  const isExpiredError = originalError?.name === 'SeamlySessionExpiredError'
 
   useEffect(() => {
     if (!isExpiredError && srText) {

package/src/javascripts/ui/components/layout/pre-chat-messages.js

@@ -1,6 +1,7 @@
+import { useSelector } from 'react-redux'
 import useEventComponentMapping from 'ui/hooks/use-event-component-mapping'
 import { useConfig } from 'domains/config/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 
@@ -11,10 +12,10 @@ export function PreChatMessageEvent({ event }) {
 
 export default function PreChatMessages() {
   const { preChatEvents, layoutMode } = useConfig()
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
   const { isOpen } = useVisibility()
 
-  const isVisible = !(hasInterrupt || !preChatEvents?.length || isOpen)
+  const isVisible = !(hasError || !preChatEvents?.length || isOpen)
 
   return (
     isVisible && (

package/src/javascripts/ui/components/suggestions/index.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import SuggestionsList from 'ui/components/suggestions/suggestions-list'
 import InOutTransition, {
   transitionStartStates,
@@ -18,7 +19,7 @@ import { actionTypes } from 'ui/utils/seamly-utils'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
@@ -37,7 +38,7 @@ const Suggestions = ({ isAside = false }) => {
   const containerRef = useRef(null)
   const { sendPolite } = useLiveRegion()
   // interrupt & countdown hooks
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
   const { hasCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
   const { hasPrompt, continueChat } = useSeamlyResumeConversationPrompt()
   // data hooks
@@ -45,8 +46,8 @@ const Suggestions = ({ isAside = false }) => {
   const payload = useSeamlyServiceData('suggestion')
   const { body: eventBody } = useTranslatedEventData({ payload })
   const suggestions = useMemo(
-    () => (payload && !hasInterrupt ? eventBody : []),
-    [payload, hasInterrupt, eventBody],
+    () => (payload && !hasError ? eventBody : []),
+    [payload, hasError, eventBody],
   )
 
   const prevSuggestions = useRef(null)

package/src/javascripts/ui/components/translation-chat-status/index.tsx

@@ -1,8 +1,9 @@
 import { useCallback } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import ChatStatus from 'ui/components/chat-status'
 import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
 import { useI18n } from 'domains/i18n/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import {
   useLocaleNativeName,
   useTranslations,
@@ -12,7 +13,7 @@ import {
 export default function TranslationChatStatus() {
   const { t } = useI18n()
   const { id } = useTranslationsContainer()
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
   const { disableTranslations, currentLocale } = useTranslations()
   const localeNativeName = useLocaleNativeName(currentLocale)
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
@@ -24,7 +25,7 @@ export default function TranslationChatStatus() {
     focusSkiplinkTarget()
   }, [disableTranslations, focusSkiplinkTarget])
 
-  if (hasInterrupt) {
+  if (hasError) {
     return null
   }
 

package/src/javascripts/ui/components/view/app-view.js

@@ -1,12 +1,11 @@
 import Conversation from '../conversation/conversation'
 import Chat from '../layout/chat'
 import ChatFrame from '../layout/chat-frame'
-import Interrupt from '../layout/interrupt'
 
 const AppView = () => {
   return (
     <Chat>
-      <ChatFrame interruptComponent={Interrupt}>
+      <ChatFrame>
         <Conversation />
       </ChatFrame>
     </Chat>

package/src/javascripts/ui/components/view/deprecated-view.js

@@ -5,7 +5,6 @@ import DeprecatedToggleButton from '../entry/deprecated-toggle-button'
 import AgentInfo from '../layout/agent-info'
 import DeprecatedAppFrame from '../layout/deprecated-app-frame'
 import Header from '../layout/header'
-import Interrupt from '../layout/interrupt'
 
 const ShowInlineView = ({ children }) => {
   const { showInlineView, containerRef } = useShowInlineView()
@@ -24,7 +23,7 @@ const DeprecatedView = () => {
           <Header onCloseChat={closeChat}>
             <AgentInfo />
           </Header>
-          <ChatFrame interruptComponent={Interrupt}>
+          <ChatFrame>
             <Conversation />
           </ChatFrame>
         </DeprecatedAppFrame>

package/src/javascripts/ui/components/view/{index.js → index.tsx}

@@ -1,12 +1,24 @@
-import { useCallback, useMemo } from 'preact/hooks'
+import { useTranslatedEventData } from 'package/hooks'
+import { useCallback, useEffect, useMemo } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import AppView from 'ui/components/view/app-view'
 import InlineView from 'ui/components/view/inline-view'
 import WindowView from 'ui/components/view/window-view'
 import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
 import { useSeamlyContainerElement } from 'ui/hooks/focus-helper-hooks'
+import {
+  useSeamlyCurrentAgent,
+  useSeamlyServiceInfo,
+  useSeamlyUnreadCount,
+} from 'ui/hooks/seamly-state-hooks'
+import useNotification from 'ui/hooks/use-notifications'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
+import {
+  selectLastUnreadEvent,
+  selectShowNotifications,
+} from 'domains/store/selectors'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 
@@ -16,17 +28,50 @@ const ViewComponentsMap = {
   window: WindowView,
 }
 
+function stripHtml(html) {
+  const tmp = document.createElement('div')
+  tmp.innerHTML = html
+  return tmp.textContent || tmp.innerText || ''
+}
+
 const View = ({ children }) => {
+  const { sendNotification } = useNotification()
+  const unreadMessageCount = useSeamlyUnreadCount()
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
   const { namespace, layoutMode, zIndex } = useConfig()
+  const currentAgent = useSeamlyCurrentAgent()
+  const { proactiveMessages } = useSeamlyServiceInfo()
   const { isOpen, isVisible } = useVisibility()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
   const userHasResponded = useUserHasResponded()
+  const lastUnreadEvent = useSelector(selectLastUnreadEvent)
+  const { body } = useTranslatedEventData(lastUnreadEvent)
+
+  const showNotifications = useSelector(selectShowNotifications)
   const { locale } = useI18n()
+
+  useEffect(() => {
+    if (unreadMessageCount === 0 || !proactiveMessages || !showNotifications)
+      return
+
+    sendNotification(currentAgent?.name, {
+      // @ts-ignore
+      body: stripHtml(body?.text || body.prompt?.text),
+      icon: currentAgent?.avatar,
+    })
+  }, [
+    sendNotification,
+    unreadMessageCount,
+    body,
+    currentAgent,
+    proactiveMessages,
+    showNotifications,
+  ])
   const ViewComponent = ViewComponentsMap[layoutMode]
 
   const containerElementRef = useCallback(
-    (container) => {
+    (container: HTMLElement) => {
+      if (typeof setSeamlyContainerElement !== 'function') return
       setSeamlyContainerElement(container)
     },
     [setSeamlyContainerElement],
@@ -54,7 +99,11 @@ const View = ({ children }) => {
     `namespace--${namespace}`,
   ]
 
-  const classNames = ['app', ...defaultClassNames, ...appContainerClassNames]
+  const classNames = ['app', ...defaultClassNames]
+
+  if (typeof appContainerClassNames !== 'function') {
+    classNames.push(...appContainerClassNames)
+  }
 
   if (!isOpen && layoutMode !== 'app') {
     classNames.push('app--collapsed')
@@ -69,7 +118,7 @@ const View = ({ children }) => {
       <div
         className={className(classNames)}
         lang={blockLang}
-        tabIndex="-1"
+        tabIndex={-1}
         data-nosnippet
         style={{ zIndex }}
         ref={containerElementRef}