@seamly/web-ui 20.8.1 → 21.0.0

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)

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

@@ -1,19 +1,19 @@
-import { useState, useEffect, useRef } from 'preact/hooks'
-import { className } from 'lib/css'
+import { useEffect, useRef, useState } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
+import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
 import {
   useFileUploadMeta,
-  useSkiplinkTargetFocusing,
   useLiveRegion,
   useSeamlyCurrentAgent,
+  useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
-import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
-import { useI18n } from 'domains/i18n/hooks'
-import { entryTypes } from 'ui/utils/seamly-utils'
 import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
+import { entryTypes } from 'ui/utils/seamly-utils'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 
 const UploadToggle = () => {
   const { t } = useI18n()

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

@@ -1,25 +1,25 @@
-import { useEffect, useRef, useMemo } from 'preact/hooks'
-import { className } from 'lib/css'
+import { useEffect, useMemo, useRef } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
-import { actionTypes } from 'ui/utils/seamly-utils'
-import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
-import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
+import InOutTransition, {
+  transitionStartStates,
+} from 'ui/components/widgets/in-out-transition'
+import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
+import { useLiveRegion } from 'ui/hooks/live-region-hooks'
 import {
-  useSeamlyServiceData,
   useSeamlyLayoutMode,
+  useSeamlyServiceData,
 } from 'ui/hooks/seamly-state-hooks'
-import { useGeneratedId } from 'ui/hooks/utility-hooks'
-import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
-import { useLiveRegion } from 'ui/hooks/live-region-hooks'
+import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
 import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
 import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
+import { useGeneratedId } from 'ui/hooks/utility-hooks'
+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 InOutTransition, {
-  transitionStartStates,
-} from 'ui/components/widgets/in-out-transition'
-import { useTranslatedEventData } from 'domains/translations/hooks'
 import { useInterrupt } from 'domains/interrupt/hooks'
-import { useUserHasResponded } from 'domains/app/hooks'
+import { useTranslatedEventData } from 'domains/translations/hooks'
+import { className } from 'lib/css'
 
 const Faq = () => {
   const { t } = useI18n()

package/src/javascripts/ui/components/form-controls/error.js

@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'preact/hooks'
-import { className } from 'lib/css'
+import { useEffect, useState } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
+import { className } from 'lib/css'
 
 export default function Error({ id, error }) {
   const [isAvailable, setIsAvailable] = useState(false)

package/src/javascripts/ui/components/form-controls/file-input.js

@@ -1,8 +1,8 @@
 import { useCallback, useState } from 'preact/hooks'
-import { className } from 'lib/css'
-import { useGeneratedId } from 'ui/hooks/seamly-hooks'
-import { useFormControl, useFormContext } from 'domains/forms/hooks'
 import Icon from 'ui/components/layout/icon'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
+import { useFormContext, useFormControl } from 'domains/forms/hooks'
+import { className } from 'lib/css'
 import Error from './error'
 
 export default function FileInput({

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

@@ -1,13 +1,13 @@
 import {
+  useSeamlyCurrentAgent,
   useSeamlyHeaderData,
   useSeamlyUnreadCount,
-  useSeamlyCurrentAgent,
 } from 'ui/hooks/seamly-hooks'
-import { className } from 'lib/css'
+import { useStartChatIcon } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useInterrupt } from 'domains/interrupt/hooks'
-import { useStartChatIcon } from 'domains/config/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
 import Icon from './icon'
 
 const AgentInfo = () => {

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

@@ -1,27 +1,35 @@
-import { className } from 'lib/css'
 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 { useSeamlyLayoutMode } from 'ui/hooks/seamly-state-hooks'
 import { useInterrupt } from 'domains/interrupt/hooks'
+import TranslationStatus from 'domains/translations/components/translation-status'
 import { useVisibility } from 'domains/visibility/hooks'
-import TranslationsChatStatus from 'domains/translations/components/chat-status'
+import { className } from 'lib/css'
 
 function ChatFrame({ children, interruptComponent: InterruptComponent }) {
   const { hasInterrupt, meta } = useInterrupt()
-  const { isOpen } = useVisibility()
+  const { isOpen, closeChat } = useVisibility()
+  const { isWindow } = useSeamlyLayoutMode()
 
-  const getContent = () => {
-    if (hasInterrupt) {
-      if (isOpen) {
-        return <InterruptComponent {...meta} />
-      }
-      return null
+  if (hasInterrupt) {
+    if (isOpen) {
+      return <InterruptComponent {...meta} />
     }
-    return children
+    return null
   }
 
   return (
     <>
-      <TranslationsChatStatus />
-      <div className={className('chat__container')}>{getContent()}</div>
+      <ChatScrollProvider>
+        <div className={className('chat__container__header')}>
+          <TranslationStatus />
+          {isOpen && isWindow && <CollapseButton onClick={closeChat} />}
+        </div>
+        {children}
+      </ChatScrollProvider>
+      <EntryContainer />
       {isOpen && <AppOptions />}
     </>
   )

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

@@ -1,13 +1,13 @@
+import { forwardRef } from 'preact/compat'
+import Suggestions from 'ui/components/suggestions'
+import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
+import { useSeamlyLayoutMode } from 'ui/hooks/seamly-state-hooks'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
+import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
-import { forwardRef } from 'preact/compat'
 import { className } from 'lib/css'
-import { useSeamlyLayoutMode } from 'ui/hooks/seamly-state-hooks'
-import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
-import { visibilityStates } from 'domains/visibility/constants'
-import Suggestions from 'ui/components/suggestions'
 
 const Chat = forwardRef(
   ({ children, className: givenClassName = '' }, forwardedRef) => {

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

@@ -1,9 +1,3 @@
-import { useUserHasResponded } from 'domains/app/hooks'
-import { useConfig } from 'domains/config/hooks'
-import { useI18n } from 'domains/i18n/hooks'
-import { visibilityStates } from 'domains/visibility/constants'
-import { useVisibility } from 'domains/visibility/hooks'
-import { className } from 'lib/css'
 import { useCallback, useMemo } from 'preact/hooks'
 import Faq from 'ui/components/faq/faq'
 import {
@@ -11,6 +5,12 @@ import {
   useSeamlyContainerElement,
   useSeamlyLayoutMode,
 } from 'ui/hooks/seamly-hooks'
+import { useUserHasResponded } from 'domains/app/hooks'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
 
 const DeprecatedAppFrame = ({ children }) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()

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

@@ -0,0 +1,34 @@
+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 TranslationStatus from 'domains/translations/components/translation-status'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
+
+function ChatFrame({ children, interruptComponent: InterruptComponent }) {
+  const { hasInterrupt, meta } = useInterrupt()
+  const { isOpen } = useVisibility()
+
+  if (hasInterrupt) {
+    if (isOpen) {
+      return <InterruptComponent {...meta} />
+    }
+    return null
+  }
+
+  return (
+    <>
+      <ChatScrollProvider>
+        <div className={className('chat__container__header')}>
+          <TranslationStatus />
+        </div>
+        {children}
+      </ChatScrollProvider>
+      <EntryContainer />
+      {isOpen && <AppOptions />}
+    </>
+  )
+}
+
+export default ChatFrame

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

@@ -1,7 +1,7 @@
 import { useRef } from 'preact/hooks'
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n/hooks'
 import { useSeamlyStateContext } from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 import Icon from './icon'
 
 const Header = ({ children, onCloseChat }) => {

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

@@ -1,22 +1,21 @@
-import { className as classNameFn } from 'lib/css'
-
 /* eslint-disable import/no-webpack-loader-syntax */
 // The eslint rules are disabled for this as otherwsise we'd need to include the loader rule in all implementations
 // this can again be changed when we can import pre-built packages in implementations
-
 import iconAvatar32 from '!!raw-loader!../../../../icons/avatar_bot-32.svg'
+import iconArrowLeft16 from '!!raw-loader!../../../../icons/icon_arrow_left-16.svg'
+import iconArrowRight16 from '!!raw-loader!../../../../icons/icon_arrow_right-16.svg'
 import iconBalloon32 from '!!raw-loader!../../../../icons/icon_balloon-32.svg'
-import iconChevronDown32 from '!!raw-loader!../../../../icons/icon_chevron_down-32.svg'
+import iconCheck16 from '!!raw-loader!../../../../icons/icon_check-16.svg'
+import iconCheck32 from '!!raw-loader!../../../../icons/icon_check-32.svg'
 import iconChevronDown8 from '!!raw-loader!../../../../icons/icon_chevron_down-8.svg'
-import iconChevronRight16 from '!!raw-loader!../../../../icons/icon_chevron_right-16.svg'
+import iconChevronDown32 from '!!raw-loader!../../../../icons/icon_chevron_down-32.svg'
 import iconChevronRight8 from '!!raw-loader!../../../../icons/icon_chevron_right-8.svg'
-import iconClose16 from '!!raw-loader!../../../../icons/icon_close-16.svg'
+import iconChevronRight16 from '!!raw-loader!../../../../icons/icon_chevron_right-16.svg'
 import iconClose8 from '!!raw-loader!../../../../icons/icon_close-8.svg'
+import iconClose16 from '!!raw-loader!../../../../icons/icon_close-16.svg'
 import iconDownload16 from '!!raw-loader!../../../../icons/icon_download-16.svg'
 import iconEnlarge32 from '!!raw-loader!../../../../icons/icon_enlarge-32.svg'
 import iconError16 from '!!raw-loader!../../../../icons/icon_error-16.svg'
-import iconArrowLeft16 from '!!raw-loader!../../../../icons/icon_arrow_left-16.svg'
-import iconArrowRight16 from '!!raw-loader!../../../../icons/icon_arrow_right-16.svg'
 import iconFile32 from '!!raw-loader!../../../../icons/icon_file-32.svg'
 import iconNewTopic32 from '!!raw-loader!../../../../icons/icon_newtopic-32.svg'
 import iconNewTranslation16 from '!!raw-loader!../../../../icons/icon_newtranslation-16.svg'
@@ -24,6 +23,7 @@ import iconNewTranslation32 from '!!raw-loader!../../../../icons/icon_newtransla
 import iconOptions32 from '!!raw-loader!../../../../icons/icon_options-32.svg'
 import iconSend32 from '!!raw-loader!../../../../icons/icon_send-32.svg'
 import iconUpload32 from '!!raw-loader!../../../../icons/icon_upload-32.svg'
+import { className as classNameFn } from 'lib/css'
 
 /* eslint-enable import/no-webpack-loader-syntax */
 
@@ -48,9 +48,11 @@ const ICONS = {
   error16: iconError16,
   arrowLeft16: iconArrowLeft16,
   arrowRight16: iconArrowRight16,
+  check32: iconCheck32,
+  check16: iconCheck16,
 }
 
-const Icon = ({ name, size = '32', className, alt }) => {
+const Icon = ({ name, size = '32', className = undefined, alt }) => {
   const iconName = `${name}${size}`
 
   return (

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

@@ -1,11 +1,11 @@
 import { useEffect } from 'preact/hooks'
-import { className } from 'lib/css'
 import {
-  useSeamlyCommands,
-  useLiveRegion,
   useGeneratedId,
+  useLiveRegion,
+  useSeamlyCommands,
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
 
 const Interrupt = ({
   originalError,
@@ -22,7 +22,7 @@ const Interrupt = ({
   const isExpiredError = originalError.name === 'SeamlySessionExpiredError'
 
   useEffect(() => {
-    if (isExpiredError) {
+    if (isExpiredError && seamlyCommands[action]) {
       seamlyCommands[action]()
     }
   }, [action, seamlyCommands, isExpiredError])
@@ -38,7 +38,9 @@ const Interrupt = ({
   }, [sendPolite, srText, isExpiredError])
 
   const onClickHandler = () => {
-    seamlyCommands[action]()
+    if (seamlyCommands[action]) {
+      seamlyCommands[action]()
+    }
     focusSkiplinkTarget()
   }
 

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

@@ -1,8 +1,8 @@
+import useEventComponentMapping from 'ui/hooks/use-event-component-mapping'
 import { useConfig } from 'domains/config/hooks'
 import { useInterrupt } from 'domains/interrupt/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
-import useEventComponentMapping from 'ui/hooks/use-event-component-mapping'
 
 export function PreChatMessageEvent({ event }) {
   const [Component] = useEventComponentMapping(event)

package/src/javascripts/ui/components/layout/privacy-disclaimer.js

@@ -1,6 +1,6 @@
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n/hooks'
 import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 
 const PrivacyDisclaimer = () => {
   const { t } = useI18n()

package/src/javascripts/ui/components/options/options-button.js

@@ -1,14 +1,14 @@
 import { createRef } from 'preact'
-import { useState, useRef, useEffect, useMemo } from 'preact/hooks'
-import { className } from 'lib/css'
-import { useSeamlyOptions, useOptionButton } from 'ui/hooks/seamly-hooks'
-import { useI18n } from 'domains/i18n/hooks'
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
-import { getKey, keyNames, focusElement } from 'ui/utils/general-utils'
 import { timeout } from 'ui/hooks/focus-helper-hooks'
+import { useOptionButton, useSeamlyOptions } from 'ui/hooks/seamly-hooks'
+import { focusElement, getKey, keyNames } from 'ui/utils/general-utils'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 import Options from './options'
 
 const OptionsButton = () => {