@seamly/web-ui 19.0.0-beta.2 → 19.1.1

package/src/javascripts/index.js

@@ -12,7 +12,7 @@ export { default as AgentInfo } from './ui/components/layout/agent-info'
 export { default as AppFrame } from './ui/components/layout/app-frame'
 
 // Used by: Client
-export { calculateVisibility } from './ui/utils/seamly-utils'
+export { calculateVisibility } from './domains/visibility'
 
 // Used by: Client
 export { default as ChatFrame } from './ui/components/layout/chat-frame'
@@ -114,7 +114,7 @@ export { useSeamlyMessageContainerClassNames } from './ui/hooks/seamly-hooks'
 export { useSeamlyOptions } from './ui/hooks/seamly-hooks'
 
 // Used by: Client
-export { useSeamlyVisibility } from './ui/hooks/seamly-hooks'
+export { useVisibility as useSeamlyVisibility } from './domains/visibility'
 
 // Used by: Client
 export {
@@ -135,7 +135,7 @@ export { default as View } from './ui/components/layout/view'
 
 // Used by: Client
 // Used by: StyleGuide
-export { visibilityStates } from './ui/utils/seamly-utils'
+export { visibilityStates } from './domains/visibility'
 
 // Used by: StyleGuide
 export { API } from './api'
@@ -143,14 +143,5 @@ export { API } from './api'
 // Used by: StyleGuide
 export { default as SeamlyGeneralError } from './api/errors/seamly-general-error'
 
-// Used by: StyleGuide
-export { default as SeamlyConfigurationError } from './api/errors/seamly-configuration-error'
-
-// Used by: StyleGuide
-export { default as SeamlySessionExpiredError } from './api/errors/seamly-session-expired-error'
-
 // Used by: StyleGuide
 export { default as SeamlyOfflineError } from './api/errors/seamly-offline-error'
-
-// Used by: StyleGuide
-export { default as SeamlyUnauthorizedError } from './api/errors/seamly-unauthorized-error'

package/src/javascripts/lib/engine/index.js

@@ -51,6 +51,7 @@ export default class Engine {
 
     const store = createStore({
       api: this.api,
+      eventBus: this.eventBus,
     })
 
     await store.dispatch(AppActions.initialize(renderConfig))

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

@@ -1,3 +1,5 @@
+import { randomId } from '../id'
+
 export const SLICE_DELIMITER = '/'
 export const DOMAIN_DELIMITER = '//'
 
@@ -10,7 +12,8 @@ export function createAction(
   identityReducer = (payload) => ({ payload }),
 ) {
   const action = (...params) => ({ type, ...identityReducer(...params) })
-  action.toString = () => type.toString()
+  action.toString = () => String(type)
+  action.match = (obj) => obj?.type === String(type)
   return action
 }
 
@@ -32,22 +35,51 @@ export function createActions(baseType, ...args) {
   return handlers.map((handler) => create(...handler))
 }
 
-export function createThunk(type, thunkCreator) {
-  const fn = (...args) => {
-    const thunk = thunkCreator(...args)
-    thunk.type = type
-    return thunk
+export function createThunk(type, payloadCreator) {
+  const [pending, fulfilled, rejected] = createActions(type, {
+    pending: (arg, requestId) => ({
+      meta: { arg, requestId, status: 'pending' },
+    }),
+    fulfilled: (arg, payload, requestId) => ({
+      payload,
+      meta: { arg, requestId, status: 'fulfilled' },
+    }),
+    rejected: (arg, error, requestId) => ({
+      error,
+      meta: { arg, requestId, status: 'rejected', error: String(error) },
+    }),
+  })
+  const thunkCreator = (arg) => (dispatch, getState, extra) => {
+    const requestId = randomId()
+    const promise = (async () => {
+      let finalAction
+      try {
+        dispatch(pending(arg, requestId))
+        const prms = payloadCreator(arg, { dispatch, getState, extra })
+        const result = await prms
+        finalAction = fulfilled(arg, result, requestId)
+      } catch (error) {
+        finalAction = rejected(arg, error, requestId)
+      }
+      dispatch(finalAction)
+      return finalAction
+    })()
+    return Object.assign(promise, {
+      type,
+      arg,
+      requestId,
+    })
   }
-  fn.toString = () => type
-  return fn
+  return Object.assign(thunkCreator, {
+    type,
+    pending,
+    fulfilled,
+    rejected,
+  })
 }
 
 export function createReducer(domain, handlers = {}, defaultState) {
-  const reducer = (state, action) => {
-    if (state === undefined) {
-      // eslint-disable-next-line no-param-reassign
-      state = defaultState
-    }
+  const reducer = (state = defaultState, action) => {
     const typeReducer = handlers?.[action?.type]
     return typeReducer ? typeReducer(state, action) : state
   }

package/src/javascripts/lib/store/providers/session-storage.js

@@ -3,7 +3,12 @@ export default function store(key) {
 
   return {
     get() {
-      return JSON.parse(sessionStorage.getItem(KEY))
+      const candidates = [KEY, KEY.split('.').slice(0, -1).join('.')]
+      let val
+      do {
+        val = sessionStorage.getItem(candidates[0])
+      } while (candidates.shift() && !val)
+      return JSON.parse(val)
     },
 
     set(value) {

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

@@ -82,7 +82,7 @@ const StyleGuideApp = ({
         overlay.addEventListener('click', () => {
           setStaticState((s) => ({
             ...s,
-            visible: 'minimized',
+            visibility: { ...s.visibility, visible: 'minimized' },
           }))
         })
       }

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

@@ -6,6 +6,7 @@ import {
   StoreProvider,
   createReduxStore,
 } from '@seamly/web-ui'
+
 import stateReducer from '../../domains/store/state-reducer'
 import { Reducer as formReducer } from '../../domains/forms'
 import { Reducer as translationsReducer } from '../../domains/translations'
@@ -19,6 +20,7 @@ import {
   Reducer as configReducer,
   Actions as ConfigActions,
 } from '../../domains/config'
+import { Reducer as visibilityReducer } from '../../domains/visibility'
 
 const bareApi = {
   send: () => {},
@@ -37,6 +39,7 @@ const SeamlyTestCore = ({ state, translations, children }) => {
       translations: translationsSlice,
       interrupt: interruptSlice,
       config: configSlice,
+      visibility: visibilitySlice,
       ...restState
     } = state || {}
     const newStore = createReduxStore({
@@ -48,15 +51,17 @@ const SeamlyTestCore = ({ state, translations, children }) => {
         [String(translationsReducer)]: translationsReducer,
         [String(i18nReducer)]: i18nReducer,
         [String(interruptReducer)]: interruptReducer,
+        [String(visibilityReducer)]: visibilityReducer,
       },
       initialState: {
         state: restState,
         [String(translationsReducer)]: translationsSlice,
         [String(interruptReducer)]: interruptSlice,
+        [String(visibilityReducer)]: visibilitySlice,
       },
     })
     newStore.dispatch(ConfigActions.initialize(configSlice || {}))
-    newStore.dispatch(I18nActions.setLocaleResolve('en-GB', translations))
+    newStore.dispatch(I18nActions.setLocale.fulfilled('en-GB', translations))
     return newStore
   }, [state, translations])
 

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

@@ -3,7 +3,6 @@ import {
   randomId,
   SeamlyOfflineError,
   SeamlyGeneralError,
-  SeamlyConfigurationError,
 } from '@seamly/web-ui'
 import { addTranslationData } from './state-helpers'
 
@@ -21,7 +20,9 @@ const baseState = {
   isLoading: false,
   idleDetachCountdown: { hasCountdown: false, isActive: false },
   resumeConversationPrompt: false,
-  visible: visibilityStates.open,
+  visibility: {
+    visibility: visibilityStates.open,
+  },
   serviceInfo: {
     activeServiceSessionId: '',
   },
@@ -953,13 +954,37 @@ const standardState = {
     headingText: 'System messages',
     description: '',
     ...baseState,
+    config: {
+      overrideMessages: {
+        timeIndicator: {
+          enabled: true,
+          threshold: 3600000,
+        },
+      },
+    },
     participantInfo,
     events: [
+      {
+        type: 'message',
+        payload: {
+          ...shortTextMessage.payload,
+          occurredAt: (Date.now() - 86400000 * 5) * 1000,
+          id: randomId(),
+          body: {
+            text: 'Long ago when a dialog started',
+            type: 'text',
+            variables: {},
+          },
+        },
+      },
       participantMessage,
       participantMessageDefaultIcon,
       newTopicDivider,
-      infoMessage,
       transcriptInfoMessage,
+      ...[newTranslationDividerStart, newTranslationDividerStop].map(
+        addTranslationData,
+      ),
+      infoMessage,
     ],
   },
   choicePromptMessages: {
@@ -1142,34 +1167,24 @@ const standardState = {
       },
     ],
   },
-  disconnectedInterrupt: {
-    // Important: This cannot pick up the language files so the text is hard set here.
-    category: categoryKeys.errors,
-    headingText: 'Disconnected interrupt',
-    description: '',
-    ...baseState,
-    interrupt: {
-      error: new SeamlyOfflineError(),
-    },
-  },
-  generalErrorInterrupt: {
+  errorWithAction: {
     // Important: This cannot pick up the language files so the text is hard set here.
     category: categoryKeys.errors,
-    headingText: 'General error interrupt',
+    headingText: 'Error with a user action',
     description: '',
     ...baseState,
     interrupt: {
       error: new SeamlyGeneralError(),
     },
   },
-  configErrorInterrupt: {
+  errorWithoutAction: {
     // Important: This cannot pick up the language files so the text is hard set here.
     category: categoryKeys.errors,
-    headingText: 'Config error interrupt',
+    headingText: 'Error without a user action',
     description: '',
     ...baseState,
     interrupt: {
-      error: new SeamlyConfigurationError(),
+      error: new SeamlyOfflineError(),
     },
   },
   privacyDisclaimer: {
@@ -1694,6 +1709,7 @@ const standardState = {
       activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
     },
     events: [
+      newTranslationDividerStart,
       infoMessage,
       shortTextMessage,
       {
@@ -1722,6 +1738,8 @@ const standardState = {
       textMesageWithBullets,
       choicePromptMessage,
       ctaMessage,
+      newTranslationDividerStop,
+      newTranslationDividerStart,
     ].map(addTranslationData),
     translations: {
       ...translationsSlice,
@@ -1786,7 +1804,10 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
           window: {
             ...baseState,
             config: { ...baseState.config, layoutMode: 'window' },
-            visible: visibilityStates.minimized,
+            visibility: {
+              ...baseState.visibility,
+              visibility: visibilityStates.minimized,
+            },
           },
         },
         minimizedStarted: {
@@ -1796,7 +1817,10 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
           window: {
             ...baseState,
             config: { ...baseState.config, layoutMode: 'window' },
-            visible: visibilityStates.minimized,
+            visibility: {
+              ...baseState.visibility,
+              visibility: visibilityStates.minimized,
+            },
             participantInfo,
             headerTitles,
           },
@@ -1808,7 +1832,10 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
           window: {
             ...baseState,
             config: { ...baseState.config, layoutMode: 'window' },
-            visible: visibilityStates.minimized,
+            visibility: {
+              ...baseState.visibility,
+              visibility: visibilityStates.minimized,
+            },
             participantInfo,
             headerTitles,
             unreadEvents: 12,

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

@@ -3,7 +3,6 @@ import { className } from '../../../lib/css'
 import { useI18n } from '../../../domains/i18n'
 import {
   useSeamlyIsLoading,
-  useSeamlyVisibility,
   useSkiplink,
   useSkiplinkTargetFocusing,
 } from '../../hooks/seamly-hooks'
@@ -12,13 +11,14 @@ import Event from './event/event'
 import Loader from './loader'
 import ComponentFilter from './component-filter'
 import PrivacyDisclaimer from '../layout/privacy-disclaimer'
+import { useVisibility } from '../../../domains/visibility'
 
 const Conversation = () => {
   const { t } = useI18n()
   const appBodyContainer = useRef(null)
   const events = useEvents()
   const isLoading = useSeamlyIsLoading()
-  const { isOpen } = useSeamlyVisibility()
+  const { isOpen } = useVisibility()
   const skiplinkTargetId = useSkiplink()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
 

package/src/javascripts/ui/components/conversation/event/hooks/use-text-rendering.js

@@ -1,4 +1,3 @@
-import { useMemo } from 'preact/hooks'
 import Mustache from 'mustache'
 
 Mustache.escape = function (escapeText) {
@@ -11,7 +10,7 @@ const parseLinkVariable = (variable) => {
   }>${variable.name}</a>`
 }
 
-export function parseRichtText(text, variables = {}) {
+export function parseRichText(text, variables = {}) {
   const view = {}
   Object.entries(variables).forEach(([key, variable]) => {
     switch (variable.type) {
@@ -34,9 +33,3 @@ export function parseRichtText(text, variables = {}) {
 
   return output
 }
-
-const useTextRendering = ({ text, variables = {} }) => {
-  return useMemo(() => parseRichtText(text, variables), [text, variables])
-}
-
-export default useTextRendering

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

@@ -1,29 +1,35 @@
+import { useMemo } from 'preact/hooks'
 import parseBody from '../../../../lib/parse-body'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
-import useTextRendering from './hooks/use-text-rendering'
+import { parseRichText } from './hooks/use-text-rendering'
 import MessageContainer from '../message-container'
 import { useTranslatedEventData } from '../../../../domains/translations'
 
 const Text = ({ event, ...props }) => {
-  const { payload } = event
-
   const [body] = useTranslatedEventData(event)
-  const eventClick = useEventLinkClickHandler(payload.id)
-  const eventBody = useTextRendering({
-    text: parseBody(body.text),
-    variables: body.variables,
-  })
+  const eventClick = useEventLinkClickHandler(event.payload.id)
+
+  const containerProps = useMemo(() => {
+    if (!event.payload.fromClient) {
+      return {
+        bodyProps: {
+          dangerouslySetInnerHTML: {
+            __html: parseRichText(parseBody(body.text), body.variables),
+          },
+        },
+      }
+    }
+    return {
+      children: <p>{body.text}</p>,
+    }
+  }, [body, event])
   return (
     <MessageContainer
       type="text"
       event={event}
       onClick={eventClick}
       {...props}
-      bodyProps={{
-        dangerouslySetInnerHTML: {
-          __html: eventBody,
-        },
-      }}
+      {...containerProps}
     />
   )
 }

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

@@ -1,3 +1,4 @@
+import { useErrorBoundary } from 'preact/hooks'
 import SeamlyInstanceFunctionsLoader from './seamly-instance-functions-loader'
 import SeamlyReadState from './seamly-read-state'
 import SeamlyNewNotifications from './seamly-new-notifications'
@@ -9,8 +10,10 @@ import SeamlyEventSubscriber from './seamly-event-subscriber'
 import SeamlyFileUpload from './seamly-file-upload'
 import { SeamlyEventBusContext, SeamlyApiContext } from './seamly-api-context'
 import { StoreProvider } from '../../../domains/redux'
+import { catchError } from '../../../domains/errors'
 
 const SeamlyCore = ({ store, children, config, eventBus, api }) => {
+  useErrorBoundary((error) => store.dispatch(catchError(error)))
   return (
     <StoreProvider store={store}>
       <SeamlyEventBusContext.Provider value={eventBus}>

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

@@ -179,15 +179,15 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
               switch (payload.type) {
                 case 'find_conversation_erred':
                   dispatch(
-                    InterruptActions.set(new SeamlySessionExpiredError()),
+                    InterruptActions.set(new SeamlySessionExpiredError(event)),
                   )
                   break
                 case 'seamly_offline':
-                  dispatch(InterruptActions.set(new SeamlyOfflineError()))
+                  dispatch(InterruptActions.set(new SeamlyOfflineError(event)))
                   dispatch({ type: CLEAR_EVENTS })
                   break
                 default:
-                  dispatch(InterruptActions.set(new SeamlyGeneralError()))
+                  dispatch(InterruptActions.set(new SeamlyGeneralError(event)))
                   break
               }
               break

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

@@ -1,22 +1,18 @@
 import { useEffect, useRef } from 'preact/hooks'
-import { visibilityStates } from '../../utils/seamly-utils'
-import { useSeamlyOptions, useSeamlyVisibility } from '../../hooks/seamly-hooks'
+import { useSeamlyOptions } from '../../hooks/seamly-hooks'
 import { useConfig } from '../../../domains/config'
 
 const SeamlyInitializer = () => {
   const { initUserSelectedOptions } = useSeamlyOptions()
   const seamlyInitialized = useRef(false)
-  const { setVisibility } = useSeamlyVisibility()
   const config = useConfig()
 
   useEffect(() => {
     if (config.api && !seamlyInitialized.current) {
       seamlyInitialized.current = true
       initUserSelectedOptions()
-
-      setVisibility(visibilityStates.initialize)
     }
-  }, [initUserSelectedOptions, config, setVisibility])
+  }, [initUserSelectedOptions, config])
 
   return null
 }

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

@@ -1,18 +1,17 @@
 import { useContext, useEffect, useRef } from 'preact/hooks'
 import {
   useSeamlyCommands,
-  useSeamlyVisibility,
   useSeamlyUnreadCount,
   useSeamlyLayoutMode,
   useSeamlyConversationUrl,
   useSeamlyActivityEventHandler,
   useSeamlyApiContext,
 } from '../../hooks/seamly-hooks'
-import { visibilityStates } from '../../utils/seamly-utils'
 import { SeamlyEventBusContext } from './seamly-api-context'
 import { useTranslations } from '../../../domains/translations'
 import { useInterrupt } from '../../../domains/interrupt'
 import { useConfig } from '../../../domains/config'
+import { visibilityStates, useVisibility } from '../../../domains/visibility'
 
 function useSeamlyInstanceFunction(functionName, fn, deps = []) {
   const eventBus = useContext(SeamlyEventBusContext)
@@ -34,7 +33,7 @@ function useSeamlyInstanceFunction(functionName, fn, deps = []) {
 const SeamlyInstanceFunctionsLoader = () => {
   const config = useConfig()
   const { sendMessage, sendContext, sendAction } = useSeamlyCommands()
-  const { setVisibility, visible } = useSeamlyVisibility()
+  const { setVisibility, visible } = useVisibility()
   const currentVisibility = useRef(visible)
   const eventBus = useContext(SeamlyEventBusContext)
   const api = useSeamlyApiContext()

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

@@ -3,11 +3,11 @@ import { useI18n } from '../../../domains/i18n'
 import {
   useEvents,
   useLiveRegion,
-  useSeamlyVisibility,
   useSeamlyIsHistoryLoaded,
 } from '../../hooks/seamly-hooks'
 import { newMessageScreenReaderWait } from '../../../config'
 import { debounce } from '../../utils/general-utils'
+import { useVisibility } from '../../../domains/visibility'
 
 const SeamlyNewNotifications = () => {
   const { t } = useI18n()
@@ -16,7 +16,7 @@ const SeamlyNewNotifications = () => {
   const previousServerEventCount = useRef(0)
   const isHistoryLoaded = useSeamlyIsHistoryLoaded()
   const { sendPolite } = useLiveRegion()
-  const { isOpen } = useSeamlyVisibility()
+  const { isOpen } = useVisibility()
   const prevIsOpen = useRef(null)
   const debounceFunc = useRef(null)
 

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

@@ -2,7 +2,6 @@ import { useEffect, useRef, useMemo } from 'preact/hooks'
 
 import {
   useEvents,
-  useSeamlyVisibility,
   useSeamlyCommands,
   useLiveRegion,
   useSeamlyUnreadCount,
@@ -17,6 +16,7 @@ import {
 } from '../../utils/seamly-utils'
 import { debounce } from '../../utils/general-utils'
 import { unreadScreenReaderWait } from '../../../config'
+import { useVisibility } from '../../../domains/visibility'
 
 const { SET_EVENTS_READ } = seamlyActions
 
@@ -24,7 +24,7 @@ const SeamlyReadState = () => {
   const { t } = useI18n()
   const events = useEvents()
   const dispatch = useSeamlyDispatchContext()
-  const { isOpen, isVisible } = useSeamlyVisibility()
+  const { isOpen, isVisible } = useVisibility()
   const { sendAction } = useSeamlyCommands()
   const unreadCount = useSeamlyUnreadCount()
   const { sendPolite } = useLiveRegion()

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

@@ -2,7 +2,6 @@ import { useLayoutEffect, useRef } from 'preact/hooks'
 import { useI18n } from '../../../domains/i18n'
 import { className } from '../../../lib/css'
 import {
-  useSeamlyVisibility,
   useSkiplinkTargetFocusing,
   useFocusIfSeamlyContainedFocus,
   useSeamlyCurrentAgent,
@@ -11,11 +10,12 @@ import {
   useSeamlyStateContext,
 } from '../../hooks/seamly-hooks'
 import { useInterrupt } from '../../../domains/interrupt'
+import { useVisibility } from '../../../domains/visibility'
 
 const ToggleButton = ({ onOpenChat }) => {
   const { t } = useI18n()
   const titleId = useGeneratedId()
-  const { isOpen } = useSeamlyVisibility()
+  const { isOpen } = useVisibility()
   const prevIsOpen = useRef(null)
   const buttonRef = useRef(null)
   const lastEventRef = useRef()

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

@@ -2,19 +2,19 @@ import Icon from './icon'
 import {
   useSeamlyHeaderData,
   useSeamlyUnreadCount,
-  useSeamlyVisibility,
   useSeamlyCurrentAgent,
 } from '../../hooks/seamly-hooks'
 import { className } from '../../../lib/css'
 import { useI18n } from '../../../domains/i18n'
 import { useInterrupt } from '../../../domains/interrupt'
 import { useConfig } from '../../../domains/config'
+import { useVisibility } from '../../../domains/visibility'
 
 const AgentInfo = () => {
   const { t } = useI18n()
   const { title, subTitle } = useSeamlyHeaderData()
   const unreadMessageCount = useSeamlyUnreadCount()
-  const { isOpen } = useSeamlyVisibility()
+  const { isOpen } = useVisibility()
   const currentAgent = useSeamlyCurrentAgent()
   const { hasInterrupt } = useInterrupt()
   const { defaults } = useConfig()

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

@@ -2,19 +2,18 @@ import { useCallback, useMemo } from 'preact/hooks'
 import { className } from '../../../lib/css'
 import {
   useSeamlyAppContainerClassNames,
-  useSeamlyVisibility,
   useSeamlyLayoutMode,
   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'
+import { useVisibility, visibilityStates } from '../../../domains/visibility'
 
 const AppFrame = ({ children }) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
-  const { isOpen, isVisible, setVisibility } = useSeamlyVisibility()
+  const { isOpen, isVisible, setVisibility } = useVisibility()
   const { zIndex, showFaq } = useConfig()
   const { isModal, isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()

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

@@ -1,13 +1,13 @@
 import { className } from '../../../lib/css'
-import { useSeamlyVisibility } from '../../hooks/seamly-hooks'
 import CobrowsingActiveFrame from '../warnings/cobrowsing-active-frame'
 import AppOptions from '../app-options'
 import { ChatStatus as TranslationsChatStatus } from '../../../domains/translations'
 import { useInterrupt } from '../../../domains/interrupt'
+import { useVisibility } from '../../../domains/visibility'
 
 function ChatFrame({ children, interruptComponent: InterruptComponent }) {
   const { hasInterrupt, meta } = useInterrupt()
-  const { isOpen } = useSeamlyVisibility()
+  const { isOpen } = useVisibility()
 
   const getContent = () => {
     if (hasInterrupt) {