@seamly/web-ui 21.0.7 → 21.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "21.0.7",
+  "version": "21.0.9",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",

package/src/javascripts/domains/forms/provider.tsx

@@ -88,7 +88,7 @@ export default function FormProvider({
     (e) => {
       e.preventDefault()
       // If the submitter is set to being aria-disabled, block the submit action
-      const ariaDisabled = e.submitter?.ariaDisabled === 'true'
+      const ariaDisabled = e.submitter.getAttribute('aria-disabled') === 'true'
       setIsSubmitted(!ariaDisabled)
       if (!ariaDisabled && validationIsValid) {
         dispatch(setHasResponded(true))

package/src/javascripts/domains/i18n/slice.ts

@@ -1,4 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit'
+import { resetApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
 import { setLocale } from 'domains/i18n/actions'
 import { I18nState } from 'domains/i18n/i18n.types'
@@ -46,6 +47,7 @@ export const i18nSlice = createSlice({
   extraReducers: (builder) => {
     // Add reducers for additional action types here, and handle loading state as needed
     builder
+      .addCase(resetApp.pending, () => initialState)
       .addCase(initializeConfig.fulfilled, (state, { payload }) => {
         state.initialLocale = payload.locale
       })

package/src/javascripts/domains/interrupt/hooks.ts

@@ -1,16 +1,24 @@
 import { useMemo } from 'preact/hooks'
 import { useSelector } from 'react-redux'
 import { useI18n } from 'domains/i18n/hooks'
-import * as Selectors from './selectors'
+import { selectError, selectHasError } from './selectors'
 
 export function useInterrupt() {
   const { t } = useI18n()
-
-  const error = useSelector(Selectors.selectError)
-  const hasInterrupt = Boolean(error)
+  const error = useSelector(selectError)
+  const hasError = useSelector(selectHasError)
 
   const meta = useMemo(() => {
-    if (!error) return {}
+    if (!hasError) {
+      return {
+        title: undefined,
+        message: undefined,
+        srText: undefined,
+        buttonText: undefined,
+        originalError: undefined,
+      }
+    }
+
     const { langKey, action } = error
     const title = t(`${langKey}.title`)
     const message = t(`${langKey}.message`)
@@ -23,7 +31,7 @@ export function useInterrupt() {
       ...(action && langKey ? { buttonText } : {}),
       originalError: error,
     }
-  }, [t, error])
+  }, [hasError, error, t])
 
-  return { hasInterrupt, meta, error }
+  return { hasError, meta, error }
 }

package/src/javascripts/domains/interrupt/middleware.ts

@@ -1,27 +1,20 @@
-import SeamlyConfigurationError from 'api/errors/seamly-configuration-error'
 import SeamlyGeneralError from 'api/errors/seamly-general-error'
-import SeamlyOfflineError from 'api/errors/seamly-offline-error'
-import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
-import SeamlyUnauthorizedError from 'api/errors/seamly-unauthorized-error'
-import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
 import { setInterrupt } from 'domains/interrupt/slice'
 
 const handledErrorTypes = [
-  SeamlyGeneralError,
-  SeamlyConfigurationError,
-  SeamlySessionExpiredError,
-  SeamlyOfflineError,
-  SeamlyUnauthorizedError,
-  SeamlyUnavailableError,
+  'SeamlyGeneralError',
+  'SeamlyConfigurationError',
+  'SeamlySessionExpiredError',
+  'SeamlyOfflineError',
+  'SeamlyUnauthorizedError',
+  'SeamlyUnavailableError',
 ]
 
 export default function createInterruptMiddleware({ api }) {
   return () => (next) => (action) => {
     const { payload, type } = action
     if (type === setInterrupt.type) {
-      if (
-        !handledErrorTypes.some((ErrorType) => payload.name === ErrorType.name)
-      ) {
+      if (!handledErrorTypes.includes(payload.name)) {
         throw new SeamlyGeneralError(payload)
       } else if (payload.action === 'reset') {
         // [SMLY-942] We clear the store before a reset to force a new conversation if the page is refreshed before the conversation is reset

package/src/javascripts/domains/interrupt/selectors.ts

@@ -4,3 +4,7 @@ export const selectError = createSelector(
   ({ interrupt }) => interrupt,
   ({ error }) => error,
 )
+
+export const selectHasError = createSelector(selectError, (error) =>
+  Boolean(error),
+)

package/src/javascripts/domains/interrupt/slice.ts

@@ -1,5 +1,5 @@
 import { createSlice, isAnyOf } from '@reduxjs/toolkit'
-import { initializeApp, resetApp } from 'domains/app/actions'
+import { initializeApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
 import { setLocale } from 'domains/i18n/actions'
 import { initializeVisibility, setVisibility } from 'domains/visibility/actions'
@@ -19,7 +19,7 @@ export const interruptSlice = createSlice({
   },
   extraReducers: (builder) => {
     builder
-      .addCase(resetApp.fulfilled, () => initialState)
+      .addCase(initializeConfig.pending, () => initialState)
       .addMatcher(
         isAnyOf(
           initializeApp.rejected,

package/src/javascripts/domains/translations/components/translation-status.tsx

@@ -1,13 +1,14 @@
+import { useSelector } from 'react-redux'
 import TranslationChatStatus from 'ui/components/translation-chat-status'
 import TranslationProposal from 'ui/components/translation-proposal'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import { useTranslations } from 'domains/translations/hooks'
 
 export default function TranslationStatus() {
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
 
   const { isActive } = useTranslations()
-  if (hasInterrupt) {
+  if (hasError) {
     return null
   }
 

package/src/javascripts/domains/translations/slice.ts

@@ -1,4 +1,5 @@
 import { PayloadAction, createSlice, nanoid } from '@reduxjs/toolkit'
+import { resetApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
 import { addEvent, setHistory } from 'domains/store/slice'
 import type { ChannelEvent, HistoryResponse } from 'domains/store/store.types'
@@ -93,6 +94,7 @@ export const translationSlice = createSlice({
   },
   extraReducers: (builder) => {
     builder
+      .addCase(resetApp.pending, () => translationsInitialState)
       .addCase(initializeConfig.fulfilled, (state, { payload }) => {
         const feature = payload?.features?.translation
         if (!feature) return

package/src/javascripts/ui/components/app-options/index.js

@@ -1,8 +1,9 @@
+import { useSelector } from 'react-redux'
 import Icon from 'ui/components/layout/icon'
 import OptionsButton from 'ui/components/options/options-button'
 import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
 import { useI18n } from 'domains/i18n/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import TranslationsOptionsButton from 'domains/translations/components/options-button'
 import {
   useLocaleNativeName,
@@ -13,14 +14,14 @@ import { className } from 'lib/css'
 export default function AppOptions() {
   const { menuOptions, allowOptionSelection } = useSeamlyOptions()
   const { isAvailable: isTranslationsAvailable } = useTranslations()
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
   const { t, locale } = useI18n()
   const localeNativeName = useLocaleNativeName(locale)
 
   if (
     (!isTranslationsAvailable &&
       (!allowOptionSelection || !menuOptions.length)) ||
-    hasInterrupt
+    hasError
   ) {
     return null
   }

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

@@ -73,7 +73,7 @@ const SeamlyEventSubscriber = () => {
         channel?.leave()
       }
     }
-    return () => {}
+    return () => undefined
   }, [api, api.connectionInfo, api.conversation])
 
   useEffect(() => {
@@ -283,6 +283,10 @@ const SeamlyEventSubscriber = () => {
 
         const { channel } = api.conversation
 
+        if (messageChannelRef.current) {
+          channel?.off('message', messageChannelRef.current)
+        }
+
         messageChannelRef.current = channel.on('message', (payload) => {
           if (!EMITTABLE_MESSAGE_TYPES.includes(payload.type)) {
             return payload
@@ -301,13 +305,7 @@ const SeamlyEventSubscriber = () => {
 
         return true
       })
-
-      return () => {
-        api.conversation.channel?.off('message', messageChannelRef.current)
-      }
     }
-
-    return () => undefined
   }, [api, api.connectionInfo, api.conversation.channel, eventBus])
 
   useEffect(() => {
@@ -315,6 +313,10 @@ const SeamlyEventSubscriber = () => {
       api.conversation.onConnection(({ connected }) => {
         if (!connected) return false
 
+        if (syncChannelRef.current) {
+          api.conversation.channel?.off('sync', syncChannelRef.current)
+        }
+
         syncChannelRef.current = api.conversation.channel.on(
           'sync',
           (payload) => {
@@ -348,13 +350,7 @@ const SeamlyEventSubscriber = () => {
 
         return true
       })
-
-      return () => {
-        api.conversation.channel?.off('sync', syncChannelRef.current)
-      }
     }
-
-    return () => undefined
   }, [api, api.connectionInfo, api.conversation.channel, events, dispatch])
 
   return null

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

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useRef } from 'preact/hooks'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { userParticipantId } from 'config'
 import {
   useSeamlyActivityEventHandler,
@@ -12,7 +12,7 @@ import {
 import { actionTypes, sourceTypes } from 'ui/utils/seamly-utils'
 import { useConfig } from 'domains/config/hooks'
 import { updateConfig } from 'domains/config/slice'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import { useTranslations } from 'domains/translations/hooks'
 import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
@@ -47,7 +47,7 @@ const SeamlyInstanceFunctionsLoader = () => {
   const previousUnreadCount = useRef(null)
   const previousVisibilityState = useRef(null)
   const { isInline, isResolving } = useSeamlyLayoutMode()
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
   const currentConversationUrl = useSeamlyConversationUrl()
   const prevConversationUrl = useRef(null)
   const onActivityHandler = useSeamlyActivityEventHandler()
@@ -142,7 +142,7 @@ const SeamlyInstanceFunctionsLoader = () => {
   )
 
   useEffect(() => {
-    if (!isResolving && !hasInterrupt) {
+    if (!isResolving && !hasError) {
       // Check for app reset
       if (
         prevConversationUrl.current &&
@@ -178,7 +178,7 @@ const SeamlyInstanceFunctionsLoader = () => {
     eventBus,
     isInline,
     isResolving,
-    hasInterrupt,
+    hasError,
     currentConversationUrl,
   ])
 

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

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useRef } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import {
   useFocusIfSeamlyContainedFocus,
   useGeneratedId,
@@ -8,7 +9,7 @@ import {
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-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'
 
@@ -24,10 +25,10 @@ const DeprecatedToggleButton = ({ onOpenChat }) => {
   const focusIfContained = useFocusIfSeamlyContainedFocus()
   const currentAgent = useSeamlyCurrentAgent()
   const agentSubtitle = useSeamlyHeaderData().subTitle
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
   const { headerCollapseButtonId } = useSeamlyStateContext()
 
-  const showAgentInfo = currentAgent && !hasInterrupt
+  const showAgentInfo = currentAgent && !hasError
 
   useLayoutEffect(() => {
     // Because we can close the app from the external API we

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/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/inline-view.js

@@ -1,10 +1,8 @@
-import { useInterrupt } from 'domains/interrupt/hooks'
 import { useShowInlineView, useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 import Conversation from '../conversation/conversation'
 import Chat from '../layout/chat'
 import ChatFrame from '../layout/chat-frame'
-import Interrupt from '../layout/interrupt'
 import PreChatMessages from '../layout/pre-chat-messages'
 import Suggestions from '../suggestions'
 import InOutTransition, {
@@ -15,12 +13,6 @@ const InlineView = () => {
   const { showInlineView, containerRef } = useShowInlineView()
 
   const { isOpen } = useVisibility()
-  const { hasInterrupt, meta } = useInterrupt()
-
-  if (hasInterrupt && !isOpen) {
-    return <Interrupt {...meta} />
-  }
-
   return (
     <>
       <InOutTransition
@@ -44,9 +36,7 @@ const InlineView = () => {
       >
         <Chat ref={containerRef}>
           {showInlineView && (
-            <ChatFrame interruptComponent={Interrupt}>
-              {isOpen && <Conversation />}
-            </ChatFrame>
+            <ChatFrame>{isOpen && <Conversation />}</ChatFrame>
           )}
         </Chat>
       </InOutTransition>