@seamly/web-ui 21.0.7 → 21.0.9

package/src/javascripts/ui/components/view/window-view/index.js

@@ -3,14 +3,12 @@ import Conversation from 'ui/components/conversation/conversation'
 import Text from 'ui/components/conversation/event/text'
 import Chat from 'ui/components/layout/chat'
 import ChatFrame from 'ui/components/layout/chat-frame'
-import Interrupt from 'ui/components/layout/interrupt'
 import PreChatMessages from 'ui/components/layout/pre-chat-messages'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useI18n } from 'domains/i18n/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 import WindowOpenButton from './window-open-button'
@@ -18,8 +16,6 @@ import WindowOpenButton from './window-open-button'
 const WindowView = () => {
   const { isOpen, openChat } = useVisibility()
   const userHasResponded = useUserHasResponded()
-  const { hasInterrupt, meta } = useInterrupt()
-
   const { t } = useI18n()
   const continueChatText = t('window.chat.continue')
   const continueChatEvent = useMemo(
@@ -33,10 +29,6 @@ const WindowView = () => {
     [continueChatText],
   )
 
-  if (hasInterrupt && !isOpen) {
-    return <Interrupt {...meta} />
-  }
-
   return (
     <>
       <WindowOpenButton onClick={openChat} />
@@ -72,7 +64,7 @@ const WindowView = () => {
         transitionStartState={transitionStartStates.notRendered}
       >
         <Chat>
-          <ChatFrame interruptComponent={Interrupt}>
+          <ChatFrame>
             <Conversation />
           </ChatFrame>
         </Chat>

package/src/javascripts/ui/components/view/window-view/window-open-button.js

@@ -1,4 +1,5 @@
 import { useCallback } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
@@ -11,15 +12,15 @@ import {
 } from 'ui/hooks/seamly-state-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'
 
 const ButtonIcon = () => {
   const startChatIcon = useStartChatIcon()
   const currentAgent = useSeamlyCurrentAgent()
-  const { hasInterrupt } = useInterrupt()
-  const isActiveConversation = currentAgent && !hasInterrupt
+  const hasError = useSelector(selectHasError)
+  const isActiveConversation = currentAgent && !hasError
   const src = isActiveConversation ? currentAgent.avatar : startChatIcon
   return src ? (
     <img

package/src/javascripts/ui/hooks/{use-seamly-chat.js → use-seamly-chat.ts}

@@ -8,6 +8,7 @@ import { selectShowInlineView } from '../../domains/visibility/selectors'
 import { useLiveRegion } from './live-region-hooks'
 import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useEvents, useSeamlyLayoutMode } from './seamly-state-hooks'
+import useSessionExpiredCommand from './use-session-expired-command'
 
 const useSeamlyChat = () => {
   const events = useEvents()
@@ -22,6 +23,9 @@ const useSeamlyChat = () => {
   const connectCalled = useRef(false)
   const { sendAssertive } = useLiveRegion()
 
+  // Automatically reset conversation if the session has expired
+  useSessionExpiredCommand()
+
   useEffect(() => {
     if (isVisible) {
       // Wait for the live containers to stabilise in the DOM before injecting
@@ -97,7 +101,7 @@ const useSeamlyChat = () => {
     if (
       !apiConfigReady ||
       connectCalled.current ||
-      (isWindow && !isOpen && !hasConversation()) ||
+      (isWindow && !isOpen) ||
       (isInline && (!isVisible || !showInlineView))
     ) {
       return

package/src/javascripts/ui/hooks/use-session-expired-command.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'preact/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import useSeamlyCommands from './use-seamly-commands'
+
+export default function useSessionExpiredCommand() {
+  const {
+    meta: { originalError, action },
+  } = useInterrupt()
+  const seamlyCommands = useSeamlyCommands()
+  const isExpiredError = originalError?.name === 'SeamlySessionExpiredError'
+
+  useEffect(() => {
+    if (isExpiredError && seamlyCommands[action]) {
+      seamlyCommands[action]()
+    }
+  }, [action, seamlyCommands, isExpiredError])
+}